/* ============================================================
   CHAI WALLAH — Design tokens
   The palette is lifted straight off the printed menu and the
   murals on the shop walls, so the site and the room match:

     forest green  — the signature-drinks panel
     burgundy      — the "Cultures Fused" cover panel
     parchment/tan — the coffee and savoury panels
     teal + red    — the regional-tea panel and the tea-house mural
     rose          — the matcha panel on the card
     black + gold  — the logo, the shopfront, the chrome

   Use the brand tokens for chrome, the panel tokens for sections,
   the mural tokens for accents. Never hardcode a colour.
   ============================================================ */

/* ---- FONTS (Google Fonts) -----------------------------------
   Cormorant and Playfair carry the printed menu's old-world serif
   feel, Outfit does the interface work, Gulzar sets the Urdu, and
   Allura is the logo's script. */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Playfair+Display:wght@500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Gulzar&display=swap');

:root {
  /* =========== BRAND IDENTITY (logo chrome) ===========
     Near-black with a green cast, so the chrome sits with the
     forest-green menu panels instead of fighting them. */
  --onyx-900:        #080C0A;   /* logo background, deepest black */
  --onyx-800:        #101613;
  --onyx-700:        #1A231E;
  --onyx-600:        #27332C;

  /* Gold, sampled off the logo and the printed board */
  --gold-100:        #FDF4D2;
  --gold-200:        #F8E6A2;
  --gold-300:        #F4D467;
  --gold-400:        #EFC53F;   /* primary logo gold */
  --gold-500:        #D2A62C;   /* antique gold for hover/press */
  --gold-600:        #A9821F;
  --gold-700:        #6F5417;

  /* =========== MENU PANELS =========== */
  /* Signature drinks — deep forest green under gold type */
  --forest-900:      #05271B;
  --forest-800:      #0B3826;
  --forest-700:      #114A33;
  --forest-600:      #1B6244;
  --forest-400:      #2E8A63;

  /* The cover panel — burgundy with a gold arabesque */
  --burgundy-900:    #3D080B;
  --burgundy-800:    #5A0F13;
  --burgundy-700:    #7A171B;
  --burgundy-500:    #9E2B2B;

  /* Coffee and savoury panels — parchment and tan */
  --parchment:       #F8F0DF;
  --parchment-deep:  #EFE0C4;
  --tan:             #E2C89C;
  --tan-deep:        #C9A870;

  /* Regional tea panel — teal, red and marigold */
  --teal-300:        #7FD6C2;
  --teal-400:        #45BFA6;
  --teal-600:        #1C8E7B;
  --teal-800:        #0E5C50;

  /* The matcha panel's pink */
  --rose-100:        #FBE8EE;
  --rose-200:        #F6D3DF;
  --rose-400:        #EBA6BF;
  --rose-600:        #C8617F;

  /* =========== MURAL ACCENTS (the walls) =========== */
  --imperial-red:    #C93226;   /* tea-house mural, Turkish fruit teas */
  --terracotta:      #8A3524;   /* the Lahore archway on the street-cart wall */
  --terracotta-deep: #5E2116;
  --marigold:        #E9A93C;   /* lantern light, marigold swirls */
  --saffron:         var(--marigold);
  --turmeric:        #D2802A;
  --jade:            #2FA05A;
  --royal-blue:      #0A66A8;   /* the arch behind the qahwa pourer */
  --indigo:          #22336B;
  --midnight:        #12204A;
  --indigo-deep:     #0A1230;
  --sky:             #A6D3E5;
  --rose-magenta:    #D96F94;
  --copper:          #8C4A2F;

  /* Older aliases, kept so existing rules keep working */
  --peacock:         var(--teal-600);
  --peacock-deep:    var(--teal-800);
  --sage:            var(--teal-300);
  --cream:           #F6EBD6;   /* warm off-white */
  --marble:          #F2EDE3;   /* counter marble */
  --paper:           #FBF5E9;   /* default light surface */

  /* =========== NEUTRALS =========== */
  --ink:             #171208;   /* warm near-black for text on parchment */
  --ink-soft:        #3B3226;
  --stone-700:       #5B5044;
  --stone-500:       #756857;   /* dark enough for 13px captions on parchment */
  --stone-300:       #C9BFAD;
  --stone-200:       #DED4C0;
  --stone-100:       #ECE4D2;
  --stone-50:        #F6F0E1;

  /* =========== SEMANTIC =========== */
  --bg:              var(--paper);
  --bg-elevated:     #FFFCF4;
  --bg-inverse:      var(--forest-900);
  --surface:         var(--cream);
  --surface-warm:    var(--parchment);

  --fg:              var(--ink);
  --fg-1:            var(--ink);          /* primary text */
  --fg-2:            var(--ink-soft);     /* secondary text */
  --fg-3:            var(--stone-500);    /* tertiary / captions */
  --fg-inverse:      var(--gold-100);     /* text on onyx or forest */
  --fg-on-gold:      var(--onyx-900);

  --accent:          var(--gold-400);
  --accent-hover:    var(--gold-500);
  --accent-press:    var(--gold-600);
  --accent-soft:     var(--gold-100);

  --hot:             var(--imperial-red);
  --warm:            var(--marigold);
  --cool:            var(--teal-600);
  --deep:            var(--forest-800);

  --success:         #2F7A4F;
  --warning:         var(--marigold);
  --danger:          var(--burgundy-700);
  --info:            var(--teal-600);

  --border:          rgba(23, 18, 8, 0.12);
  --border-strong:   rgba(23, 18, 8, 0.24);
  --border-gold:     var(--gold-400);
  --border-onyx:     var(--onyx-900);

  /* =========== MENU CATEGORY ACCENTS ===========
     One per section of the printed menu. styles.css picks these up
     through [data-cat-id]; a category the shop invents later just
     keeps the gold default. */
  --cat-accent:      var(--onyx-900);   /* controls outside a menu panel stay onyx */
  --cat-signature:   var(--forest-700);
  --cat-chai:        var(--teal-600);
  --cat-coffee:      var(--copper);
  --cat-matcha:      var(--rose-600);
  --cat-refreshers:  var(--burgundy-700);
  --cat-press:       var(--terracotta);
  --cat-breakfast:   #A25E12;   /* turmeric, taken down far enough to read on parchment */
  --cat-street:      var(--indigo);

  /* =========== TYPOGRAPHY =========== */
  --font-script:     'Allura', 'Pinyon Script', 'Brush Script MT', cursive;
  --font-display:    'Cormorant Garamond', 'Cormorant', 'Playfair Display', Georgia, serif;
  --font-board:      'Playfair Display', 'Cormorant Garamond', Georgia, serif;  /* the printed menu's headings */
  --font-sans:       'Outfit', 'Helvetica Neue', system-ui, sans-serif;
  --font-urdu:       'Gulzar', 'Noto Nastaliq Urdu', serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (modular ~1.25) */
  --t-eyebrow:       0.75rem;   /* 12px — uppercase tracked labels */
  --t-caption:       0.8125rem; /* 13px */
  --t-body-sm:       0.9375rem; /* 15px */
  --t-body:          1.0625rem; /* 17px */
  --t-body-lg:       1.1875rem; /* 19px */
  --t-h6:            1.25rem;   /* 20px */
  --t-h5:            1.5rem;    /* 24px */
  --t-h4:            1.875rem;  /* 30px */
  --t-h3:            2.375rem;  /* 38px */
  --t-h2:            3.25rem;   /* 52px */
  --t-h1:            4.5rem;    /* 72px */
  --t-display:       6.5rem;    /* 104px — for the script "S" hero moments */

  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-extra:  0.18em;   /* wordmark / eyebrow caps */

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-loose:   1.6;

  /* =========== 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;

  /* =========== RADII =========== */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-2xl: 32px;
  --r-pill: 999px;
  --r-arch: 50% 50% 8px 8px / 35% 35% 8px 8px; /* doorway arch like the mural */

  /* =========== SHADOWS =========== */
  --shadow-xs:  0 1px 2px rgba(23, 18, 8, 0.06);
  --shadow-sm:  0 2px 6px rgba(23, 18, 8, 0.08);
  --shadow-md:  0 8px 22px rgba(23, 18, 8, 0.10);
  --shadow-lg:  0 20px 48px rgba(23, 18, 8, 0.16);
  --shadow-gold:0 6px 20px rgba(239, 197, 63, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* =========== MOTION =========== */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
  --dur-pour:   900ms;          /* slow steam / pour motion */
}

/* =========== SEMANTIC TYPE RULES =========== */
.cw-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-extra);
  text-transform: uppercase;
  color: var(--fg-2);
}
.cw-script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-400);
}
.cw-h1, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.cw-h2, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.cw-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
.cw-h4, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
.cw-h5, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h5);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
.cw-h6, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h6);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
.cw-body, p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading-loose);
  color: var(--fg-1);
  margin: 0;
}
.cw-body--serif {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: var(--leading-loose);
  font-style: italic;
  color: var(--fg-2);
}
.cw-caption, small {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.cw-wordmark {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-extra);
  text-transform: uppercase;
}
.cw-urdu {
  font-family: var(--font-urdu);
  font-weight: 400;
  direction: rtl;
}