/* ==========================================================================
   ESPRESSOMOBIL — Design Tokens
   Source-of-Truth: Brand-Tokens v1.2 (2026-04-29)
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   - Allura          → Logo "Espresso" cursive substitute (mid-50s Italian script).
                       FLAGGED: not the original logo font; closest free match.
   - Inter           → "MOBIL" stamp & all UI body/headings (matches site usage).
   - Playfair Display → Editorial serif for "Coffee to go" panel script &
                       roof-sign serif. Substitute for the hand-painted serif.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* ============================================================
     1. COLOR — Brand Anchors (monochrome black/cream + yellow accent)
     ============================================================ */

  /* Primary — the brand anchor */
  --vehicle-black: #0E0E10;       /* Ape body, counter, cups */
  --logo-black:    #000000;       /* Pure black for wordmark */

  /* Accent — Yellow appears ONLY at the logo frame, never as a surface */
  --logo-yellow:   #E9E095;       /* Pastel logo frame */

  /* Atmosphere & surfaces */
  --cream-bg:      #FFF7E2;       /* Warm off-white studio background */
  --cream-bg-2:    #F2E8C9;       /* Slightly warmer cream */
  --paper:         #FFFFFF;

  /* Material — coffee tonalities */
  --crema-accent:  #DDCFB4;       /* Latte foam, crema, warm highlight */
  --espresso-brown:#3D2B1F;       /* Coffee, walnut, dark wood */
  --bean-mid:      #6B4A33;       /* Mid-roast bean */

  /* Web-only — Avada theme primary. NEVER appears in photo renders. */
  --site-sage:     #65BC7B;

  /* Neutral scale (derived from black/cream — for UI chrome only) */
  --ink-100: #0E0E10;
  --ink-90:  #1C1C1F;
  --ink-80:  #2A2A2E;
  --ink-60:  #555558;
  --ink-40:  #8A8A8D;
  --ink-20:  #C7C5BE;
  --ink-10:  #E3DFD4;
  --ink-05:  #F1ECDF;

  /* ============================================================
     2. SEMANTIC COLOR — for UI work
     ============================================================ */

  /* Foreground */
  --fg-1:        var(--vehicle-black);   /* Primary text */
  --fg-2:        var(--ink-60);          /* Secondary text */
  --fg-3:        var(--ink-40);          /* Tertiary / muted */
  --fg-on-dark:  var(--cream-bg);        /* Text on black surfaces */
  --fg-on-yellow:var(--logo-black);

  /* Background */
  --bg-1:        var(--cream-bg);        /* Default canvas */
  --bg-2:        var(--paper);           /* Card/elevated surface */
  --bg-3:        var(--ink-05);          /* Subtle grouping */
  --bg-dark:     var(--vehicle-black);   /* Hero / dark sections */
  --bg-accent:   var(--logo-yellow);     /* Reserved — logo frame only */

  /* Lines & dividers */
  --line-1:      var(--ink-10);
  --line-2:      var(--ink-20);
  --line-on-dark:rgba(245, 240, 229, 0.14);

  /* Interactive */
  --interactive: var(--vehicle-black);
  --interactive-hover: var(--ink-90);
  --interactive-on-dark: var(--cream-bg);
  --focus-ring: var(--logo-yellow);

  /* ============================================================
     3. TYPE — Families
     ============================================================ */
  --font-script:  'Allura', 'Mistral', cursive;            /* Logo "Espresso" */
  --font-stamp:   'Inter', 'Lato', system-ui, sans-serif;  /* "MOBIL", UI */
  --font-serif:   'Playfair Display', Georgia, serif;      /* Editorial / roof sign */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ============================================================
     4. TYPE — Scale (1.250 major-third on 16px base)
     ============================================================ */
  --text-12: 0.75rem;     /* 12 — micro labels */
  --text-14: 0.875rem;    /* 14 — small UI */
  --text-16: 1rem;        /* 16 — body */
  --text-18: 1.125rem;    /* 18 — lead */
  --text-22: 1.375rem;    /* 22 — h5 */
  --text-28: 1.75rem;     /* 28 — h4 */
  --text-36: 2.25rem;     /* 36 — h3 */
  --text-48: 3rem;        /* 48 — h2 */
  --text-64: 4rem;        /* 64 — h1 / hero */
  --text-96: 6rem;        /* 96 — display */

  /* Tracking — sans is mostly default; "MOBIL"-style stamp uses wider */
  --track-tight:   -0.02em;
  --track-normal:   0;
  --track-wide:     0.08em;
  --track-stamp:    0.18em;   /* MOBIL all-caps */
  --track-roof:     0.32em;   /* TO GO COFFEE roof-sign */

  /* Leading */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.65;

  /* Weights — Inter has the full range */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    900;

  /* ============================================================
     5. SPACING — 4px base
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ============================================================
     6. RADII — restrained, slight
     ============================================================ */
  --radius-0:   0px;
  --radius-1:   2px;
  --radius-2:   4px;
  --radius-3:   8px;       /* Default card */
  --radius-4:   12px;      /* Logo frame characteristic radius */
  --radius-pill: 999px;    /* Buttons */

  /* ============================================================
     7. SHADOWS — minimal (editorial, not Material)
     ============================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(14, 14, 16, 0.06);
  --shadow-2: 0 4px 14px rgba(14, 14, 16, 0.08);
  --shadow-3: 0 12px 40px rgba(14, 14, 16, 0.12);
  --shadow-cup: 0 20px 60px rgba(14, 14, 16, 0.45);  /* Hero photo elevation */

  /* Inner shadow on dark counter surfaces */
  --shadow-inner-dark: inset 0 1px 0 rgba(255, 255, 255, 0.04),
                      inset 0 -1px 0 rgba(0, 0, 0, 0.4);

  /* ============================================================
     8. MOTION — short, no bounce
     ============================================================ */
  --ease-standard: cubic-bezier(0.32, 0.04, 0.27, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;

  /* ============================================================
     9. LAYOUT
     ============================================================ */
  --container-max: 1280px;
  --gutter:        24px;
}

/* ==========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================== */

html { color: var(--fg-1); background: var(--bg-1); }
body { font-family: var(--font-body); font-size: var(--text-16); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

/* DISPLAY — Hero italianità "Ciao Amici!" type */
.t-display {
  font-family: var(--font-stamp);
  font-weight: var(--w-bold);
  font-size: var(--text-96);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

/* H1 / H2 — Section heroes */
.t-h1 { font-family: var(--font-stamp); font-weight: var(--w-bold); font-size: var(--text-64); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
.t-h2 { font-family: var(--font-stamp); font-weight: var(--w-bold); font-size: var(--text-48); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
.t-h3 { font-family: var(--font-stamp); font-weight: var(--w-semibold); font-size: var(--text-36); line-height: var(--lh-snug); }
.t-h4 { font-family: var(--font-stamp); font-weight: var(--w-semibold); font-size: var(--text-28); line-height: var(--lh-snug); }
.t-h5 { font-family: var(--font-stamp); font-weight: var(--w-semibold); font-size: var(--text-22); line-height: var(--lh-snug); }

/* SCRIPT — "Espresso" / "Coffee to go" cursive */
.t-script {
  font-family: var(--font-script);
  font-weight: var(--w-regular);
  font-size: var(--text-64);
  line-height: 1;
  letter-spacing: 0;
}

/* SERIF — "TO GO COFFEE" roof-sign / editorial captions */
.t-serif {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-style: italic;
}

/* STAMP — "MOBIL" style, wide-tracked all caps */
.t-stamp {
  font-family: var(--font-stamp);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-stamp);
  font-size: var(--text-14);
}
.t-stamp-lg { font-family: var(--font-stamp); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--track-stamp); font-size: var(--text-22); }

/* ROOF — vertical/super-wide-tracked editorial all caps */
.t-roof {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: var(--track-roof);
  font-size: var(--text-22);
}

/* BODY */
.t-lead   { font-size: var(--text-18); line-height: var(--lh-normal); color: var(--fg-1); font-weight: var(--w-regular); }
.t-body   { font-size: var(--text-16); line-height: var(--lh-normal); color: var(--fg-1); }
.t-body-2 { font-size: var(--text-14); line-height: var(--lh-normal); color: var(--fg-2); }
.t-caption{ font-size: var(--text-12); line-height: var(--lh-normal); color: var(--fg-3); }

/* CAPTION — editorial trust strip ("Karl Lagerfeld · Berlin Music Week") */
.t-editorial-caption {
  font-family: var(--font-stamp);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-stamp);
  font-size: var(--text-12);
  color: var(--fg-2);
}

/* Inverse (on dark) */
.on-dark { color: var(--fg-on-dark); }
.on-dark .t-body-2 { color: rgba(245, 240, 229, 0.7); }
.on-dark .t-caption { color: rgba(245, 240, 229, 0.55); }