/* =================================================================
   MAYURA STATION — DESIGN TOKENS
   SINGLE SOURCE of design tokens, exposed as CSS custom properties.
   Encoded from design-system/mayura-station/MASTER.md
   (official "Mayura Company Logo Guidelines" PDF), cross-checked
   against the proven ui/v6 prototype.

   Every colour, font, space and motion value used by the theme
   MUST come from a token here. Do not hard-code hex/px elsewhere.

   ❌ FORBIDDEN: the off-brand placeholder palette
      (bright red #DC2626, #F87171, pink #FEF2F2). It was a generic
      auto-generated default and is off-brand. Terracotta #A22717 is
      NOT a bright red — it is reserved for the Steakhouse chapter.

   Load order: tokens.css → base.css → main.css.
   ================================================================= */

:root{
  /* ---------- Palette — Mayura Company Logo Guidelines ---------- */
  --ink:#0A0A0A;                    /* Rich Black (Digital) — primary background / the canvas */
  --ink-2:#121212;                  /* Lifted black for panels (neutral, no colour cast) */
  --ink-3:#1A1A1A;                  /* Panel hover / deeper lift */
  --gold:#AE9A64;                   /* Gold — primary metallic accent (hairlines, eyebrows, small-caps, numerals) */
  --gold-dk:#806E4A;                /* Dark Gold — secondary gold, depth, gradients */
  --terra:#A22717;                  /* Terracotta Red — heritage accent, Steakhouse chapter only. NEVER bright red. */
  --terra-2:#C03020;                /* Terracotta hover — Steakhouse chapter only */
  --stone:#B2B2B2;                  /* Stone Grey — neutral borders, muted/secondary text */
  --white:#FFFFFF;                  /* White — high-contrast text on dark */
  --text:#E8E4DA;                   /* Warm off-white — body text on black (softer than pure white) */
  --mute:rgba(232,228,218,.55);     /* Muted body text */
  --mute-2:rgba(232,228,218,.32);   /* Faint / tertiary text */
  --rule:rgba(174,154,100,.22);     /* Gold hairline rule (chapter separators, data grids) */
  --rule-soft:rgba(232,228,218,.08);/* Soft neutral hairline */

  /* ---------- Fonts — Mayura Logo Guidelines PDF ---------- */
  --cinzel:"Cinzel",Georgia,"Times New Roman",serif;   /* Headings, wordmark, stat numerals */
  --mulish:"Mulish",-apple-system,system-ui,sans-serif;/* Eyebrows, nav, small-caps labels, data keys */
  --roboto:"Roboto",-apple-system,system-ui,sans-serif;/* Body copy, captions */

  /* ---------- Spacing scale (px) ---------- */
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:48px;
  --s6:72px;
  --s7:112px;
  --s8:160px;

  /* ---------- Layout ---------- */
  --maxw:1320px;                        /* Container max width */
  --pad:clamp(20px,4.5vw,80px);         /* Page gutter */
  --section:clamp(80px,10vw,160px);     /* Vertical section rhythm */

  /* ---------- Motion ---------- */
  --ease:cubic-bezier(.22,.61,.36,1);   /* Restrained natural ease — no bounce */
  --dur-fast:200ms;
  --dur:300ms;

  /* ---------- Breakpoints (documentation tokens) ----------
     CSS custom properties CANNOT be used inside @media queries,
     so these are documentation only. The canonical breakpoints are:
       375px  — mobile
       768px  — tablet   (--bp-sm)
       1024px — laptop   (--bp-md)
       1440px — desktop  (--bp-lg)
     Author media queries with the literal px values above. */
  --bp-sm:768px;
  --bp-md:1024px;
  --bp-lg:1440px;
}