/* ==========================================================================
   Happy Spoon — Colors & Type
   Source of truth: uploads/SCHROEDERandrea_logo_INFO.pdf (Lin Design, 16.01.2023)
   ========================================================================== */

/* --- Web fonts --------------------------------------------------------------
   The original logo uses "Night of the Dragons" (a playful, bouncy script).
   We do not have the font file, so we substitute Google Fonts "Kaushan Script"
   (similar bouncy brush-script character). Ask client for the TTF to match
   the logo exactly.

   Body text is Nunito (friendly rounded humanist sans — matches the warm,
   personal, family-run voice of Happy Spoon).                                 */
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  /* ============================================================
     BRAND COLORS (from official logo spec)
     ============================================================ */
  /* Primary — Aubergine / Deep Plum
     CMYK 56/98/32/36 · RGB 103/28/77 · Pantone 7650 C */
  --hs-aubergine:        #671C4D;
  --hs-aubergine-90:     #772D5E;
  --hs-aubergine-80:     #885175;
  --hs-aubergine-60:     #A884A0;
  --hs-aubergine-20:     #E6DAE3;
  --hs-aubergine-10:     #F2ECEF;

  /* Secondary — Olive Green
     CMYK 49/16/84/2 · RGB 150/174/74 · Pantone 377 C (80%) */
  --hs-olive:            #96AE4A;
  --hs-olive-90:         #A2B85E;
  --hs-olive-80:         #ADC279;
  --hs-olive-60:         #C3D29D;
  --hs-olive-20:         #EAEFDA;
  --hs-olive-10:         #F4F7EC;

  /* Warm neutrals — paper/cream feel appropriate for food/catering */
  --hs-cream:            #FBF7F1;  /* default page bg */
  --hs-paper:            #F5EFE5;  /* cards on cream */
  --hs-sand:             #E8DFCF;  /* hairline borders, dividers */
  --hs-ink:              #2A1E28;  /* body text, near-black with plum warmth */
  --hs-ink-70:           #5A4B57;
  --hs-ink-50:           #857682;
  --hs-ink-30:           #B6ACB2;
  --hs-white:            #FFFFFF;

  /* Semantic accents (kept on-brand) */
  --hs-success:          var(--hs-olive);
  --hs-danger:           #B84A3E;       /* warm terracotta, not pure red */
  --hs-warning:          #E0A23A;       /* ripe mustard */
  --hs-info:             var(--hs-aubergine);

  /* ============================================================
     SURFACE TOKENS
     ============================================================ */
  --surface-page:        var(--hs-cream);
  --surface-card:        var(--hs-white);
  --surface-raised:      var(--hs-paper);
  --surface-inverse:     var(--hs-aubergine);

  --fg-default:          var(--hs-ink);
  --fg-muted:            var(--hs-ink-70);
  --fg-subtle:           var(--hs-ink-50);
  --fg-inverse:          var(--hs-cream);
  --fg-brand:            var(--hs-aubergine);
  --fg-accent:           var(--hs-olive);

  --border-default:      var(--hs-sand);
  --border-strong:       var(--hs-ink-30);
  --border-brand:        var(--hs-aubergine);

  /* ============================================================
     TYPE
     ============================================================ */
  --font-script:   'Kaushan Script', 'Night of the Dragons', 'Brush Script MT', cursive;
  --font-body:     'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Scale — friendly, warm, slightly larger than default for readability */
  --text-xs:    0.75rem;    /* 12 */
  --text-sm:    0.875rem;   /* 14 */
  --text-base:  1rem;       /* 16 */
  --text-md:    1.125rem;   /* 18 */
  --text-lg:    1.25rem;    /* 20 */
  --text-xl:    1.5rem;     /* 24 */
  --text-2xl:   2rem;       /* 32 */
  --text-3xl:   2.5rem;     /* 40 */
  --text-4xl:   3.25rem;    /* 52 */
  --text-5xl:   4.5rem;     /* 72 */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ============================================================
     SPACING (4-based, warm and generous)
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;

  /* ============================================================
     RADIUS — soft, never sharp. Mirrors the soft script of the logo.
     ============================================================ */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — gentle, warm-tinted (never cold grey)
     ============================================================ */
  --shadow-sm:  0 1px 2px rgba(103, 28, 77, 0.06);
  --shadow-md:  0 4px 12px rgba(103, 28, 77, 0.08), 0 1px 2px rgba(103, 28, 77, 0.04);
  --shadow-lg:  0 16px 40px rgba(103, 28, 77, 0.12), 0 2px 6px rgba(103, 28, 77, 0.05);
  --shadow-ring-brand:  0 0 0 3px rgba(103, 28, 77, 0.18);
  --shadow-ring-accent: 0 0 0 3px rgba(150, 174, 74, 0.28);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ==========================================================================
   SEMANTIC TYPE
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — uses the script. Reserved for logo echoes, hero accents, section
   greetings. Never for UI labels or body text. Always mixed-case. */
.hs-display,
.hs-script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

h1, .h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3vw, var(--text-4xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-brand);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-default);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-default);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-default);
  margin: 0 0 var(--space-2);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lede {
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.caption {
  font-size: var(--text-sm);
  color: var(--fg-subtle);
}

a {
  color: var(--fg-brand);
  text-decoration-color: rgba(103, 28, 77, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-base) var(--ease-soft);
}
a:hover { text-decoration-color: var(--fg-brand); }

::selection {
  background: var(--hs-olive-20);
  color: var(--hs-aubergine);
}