/* ============================================================
   IndianBistro14 — Design System: TOKENS
   ------------------------------------------------------------
   Single source of truth for every design value.
   Extracted verbatim from the Phase 1 approved (frozen) UI.
   Do NOT change these values — they define the production design.
   Add new tokens here rather than hardcoding values elsewhere.
   ============================================================ */

:root{
  /* ---- Brand colors (approved palette) ---- */
  --red:#B11217;            /* primary brand red */
  --burg:#8F0F13;           /* rich burgundy (hover / accents) */
  --cream:#F7F4EF;          /* cream background */
  --gold:#D4A64A;           /* warm gold — accents/icons ONLY */
  --softgold:#C9A646;       /* soft gold */
  --char:#1F1F1F;           /* dark charcoal — app backdrop + headings */
  --white:#fff;

  /* ---- Extended ink / neutral ramp (from frozen UI) ---- */
  --ink:#3c382f;            /* body text */
  --mute:#8a8278;           /* muted captions / secondary */
  --line:#efe9df;           /* hairline borders */
  --faint:#faedce;          /* faint gold wash (info strip) */

  /* ---- Semantic accents ---- */
  --green:#2f7d32;          /* vegetarian / vegan positive */
  --green-wash:#eaf6ea;     /* vegan bar background */
  --gf:#1f6f8b;             /* gluten indicator (reserved) */

  /* ---- Shadows ---- */
  --shadow:0 10px 30px rgba(31,31,31,.10);
  --shadow-sm:0 4px 14px rgba(31,31,31,.08);

  /* ---- Typography ---- */
  --font-display:"Playfair Display", Georgia, serif;   /* elegant serif headings */
  --font-body:"Inter", system-ui, -apple-system, sans-serif; /* modern sans body */

  /* Type scale (px values used across the frozen UI) */
  --fs-hero:56px;      /* dish H1 */
  --fs-h3:21px;        /* panel headings (Did You Know) */
  --fs-lg:18px;        /* card titles */
  --fs-body:16.5px;    /* primary description */
  --fs-note:15px;      /* filling note */
  --fs-sm:14px;        /* secondary */
  --fs-xs:13px;        /* eyebrows / hints */
  --fs-xxs:12px;       /* fine print / allergy */

  /* ---- Spacing scale ---- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:28px;
  --sp-8:32px;

  /* ---- Radii ---- */
  --r-sm:10px;
  --r-md:13px;
  --r-lg:16px;
  --r-xl:22px;         /* app frame corner */

  /* ---- Motion ---- */
  --ease:.15s ease;
  --ease-md:.25s ease;
  --ease-slide:.28s ease;

  /* ---- Layout ---- */
  --maxw:1280px;       /* app frame max width */
  --panel-w:340px;     /* left concierge panel (reserved for full app) */
}

/* ---- Responsive breakpoints (documented as custom media reference) ----
   Tablet portrait ...... max-width: 900px
   Tablet landscape ..... 901px – 1200px
   Desktop / large ...... min-width: 1201px
   These are applied in base.css / components.css via @media.
   Kept here as the canonical reference so breakpoints are defined once.
------------------------------------------------------------------------ */

/* Respect users who prefer reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}