/* ============================================================
   Em & Me — Vietnamese Café · Design System
   tokens.css — foundational + semantic tokens
   (ported verbatim from the design system's colors_and_type.css)
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts as the nearest matches to
   the printed brand collateral (see README "Type" + CAVEATS).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---- Brand core ---------------------------------------- */
  --navy:        #0d2c51;   /* logo navy — primary brand ink   */
  --navy-deep:   #002856;   /* footer / deepest ink            */
  --navy-700:    #1c3d63;   /* hover / raised navy             */
  --navy-300:    #91a3bd;   /* light navy                      */
  --navy-soft:   #4a6385;   /* muted navy text                 */

  --gold:        #c6a26c;   /* antique gold — accents, eyebrows */
  --gold-deep:   #a4814c;   /* gold on light / pressed          */
  --tan:         #d0b898;   /* sand / muted box fill            */
  --tan-soft:    #e6d8c0;   /* lightest sand surface            */

  --green:       #137b3e;   /* bamboo green — badges, positive  */
  --green-deep:  #0e5e2f;
  --green-soft:  #e3f0e6;   /* green tint surface               */

  --terracotta:  #b6532f;   /* warm spice — sparing alerts/heat */

  /* ---- Environmental accents ----------------------------- *
   * Drawn from the physical café: lime walls, jade nooks,
   * Tết-red scrolls, marigold cushions, cobalt trellis, lotus
   * pink. Use as lively spot colors / illustration fills —
   * never let them outweigh navy. One accent per surface.    */
  --lime:        #7cb342;   /* grass-green feature wall         */
  --jade:        #2a9d8f;   /* teal alcove                      */
  --tet-red:     #c0392b;   /* lacquer red — couplets, stools   */
  --marigold:    #f4b41a;   /* cushions, lucky yellow           */
  --cobalt:      #1f4fd6;   /* painted trellis / porcelain blue */
  --lotus:       #e8889f;   /* lotus pink                       */
  --bamboo:      #c8a96a;   /* natural bamboo / rattan          */

  /* ---- Paper & surfaces ---------------------------------- */
  --cream:       #f7f2e9;   /* warm paper — page background     */
  --cream-deep:  #efe7d6;   /* sunk panels on cream             */
  --surface:     #fbfaf6;   /* card / raised surface            */
  --white:       #ffffff;

  /* ---- Neutrals (warm-tuned grays) ----------------------- */
  --ink:         #1d2733;   /* near-black body text             */
  --slate:       #4a5562;   /* secondary text                   */
  --stone:       #8a8579;   /* muted / captions (warm gray)     */
  --line:        #e3dac8;   /* hairline borders on cream        */
  --line-soft:   #ece4d6;

  /* ---- Semantic ------------------------------------------ */
  --bg:          var(--cream);
  --fg:          var(--navy-deep);
  --fg-muted:    var(--slate);
  --fg-subtle:   var(--stone);
  --primary:     var(--navy);
  --primary-fg:  var(--white);
  --accent:      var(--gold);
  --positive:    var(--green);
  --border:      var(--line);

  /* ---- Type families ------------------------------------- */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-serif:   'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type scale (px) ----------------------------------- */
  --t-display:   72px;   /* hero logotype-scale headlines       */
  --t-h1:        52px;
  --t-h2:        38px;
  --t-h3:        27px;
  --t-h4:        21px;
  --t-body-lg:   18px;
  --t-body:      16px;
  --t-sm:        14px;
  --t-xs:        12.5px;
  --t-eyebrow:   13px;   /* tracking-wide caps label            */

  /* ---- Spacing scale (8px base) -------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Radii --------------------------------------------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows (warm, soft) ------------------------------ */
  --shadow-sm:  0 1px 2px rgba(13,44,81,.07), 0 1px 1px rgba(13,44,81,.05);
  --shadow-md:  0 4px 14px rgba(13,44,81,.10), 0 2px 4px rgba(13,44,81,.06);
  --shadow-lg:  0 18px 44px rgba(13,44,81,.16), 0 6px 14px rgba(13,44,81,.08);
  --shadow-gold: 0 6px 20px rgba(164,129,76,.28);
}

/* ============================================================
   Base element styles
   ============================================================ */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display & headings: serif --------------------------- */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--navy-deep);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--t-h1);
  line-height: 1.06; letter-spacing: -.01em; color: var(--navy-deep);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--t-h2);
  line-height: 1.12; color: var(--navy-deep);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--t-h3);
  line-height: 1.2; color: var(--navy-deep);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700; font-size: var(--t-h4);
  line-height: 1.3; color: var(--navy-deep); letter-spacing: -.005em;
}

/* ---- Body ------------------------------------------------ */
p, .body { font-family: var(--font-sans); font-size: var(--t-body); color: var(--ink); }
.body-serif { font-family: var(--font-serif); font-size: var(--t-body-lg); line-height: 1.6; color: var(--ink); }
.lead { font-family: var(--font-serif); font-size: var(--t-h4); font-style: italic; color: var(--slate); }
small, .small { font-size: var(--t-sm); color: var(--fg-muted); }
.caption { font-size: var(--t-xs); color: var(--fg-subtle); }

/* ---- Eyebrow / tracked caps label ------------------------ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---- Price / numeric (display serif) --------------------- */
.price { font-family: var(--font-display); font-weight: 600; color: var(--navy-deep); }

/* ---- Links ----------------------------------------------- */
a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--navy-700); }