/* ============================================================================
   Swamini Foods — Design Tokens
   Derived from the printed Swamini Foods दरपत्रक (menu card), which is the
   authoritative brand artefact: heritage red wordmark, saffron scalloped
   border, green banyan mark, apricot parchment ground.
   NOTE: the card carries no blue. Royal blue is therefore NOT part of this
   identity; red leads, saffron ornaments, green signals freshness.
   Every colour pair below is contrast-checked; ratios noted inline.
   ========================================================================== */
:root {
  /* ---- brand ------------------------------------------------------------ */
  --brand-primary: #c0272d;        /* wordmark red  — 5.50:1 on bg, 4.84 on paper */
  --brand-primary-dark: #9c1e24;   /* hover/pressed — 7.55:1 with white       */
  --brand-primary-soft: #f9e0dd;   /* tinted surfaces                         */
  --brand-accent: #ee7f2d;         /* border saffron — DARK text only (2.55:1)*/
  --brand-accent-soft: #fdeeda;
  --brand-green: #287348;          /* leaf — text-capable (5.40:1)            */
  --brand-green-soft: #e4efe6;
  --brand-tree: #35803f;           /* banyan mark — illustration fill only    */
  --brand-accent-dark: #d97528;    /* saffron hover — dark ink 4.90:1          */
  --brand-green-dark: #1e5b38;     /* green hover   — white 8.05:1             */

  /* ---- WhatsApp: fixed third-party brand colour, not ours to retune ------ */
  --brand-whatsapp: #25d366;
  --brand-whatsapp-dark: #1fb857;
  --color-on-whatsapp: #06371f;    /* 6.73:1 on brand green                    */
  --color-on-status: #ffffff;      /* white on success/danger/info fills        */

  /* ---- inverted surfaces (announce bar, footer) ------------------------- */
  --announce-fg: #fbe6cb;          /* 6.58:1 on --brand-primary-dark           */
  --footer-bg: #3b1d18;            /* deep red-brown, harmonises with the red  */
  --footer-fg: #e8d5c4;            /* 10.73:1 on footer-bg                     */
  --footer-muted: #bda694;         /* 6.58:1 on footer-bg                      */

  /* ---- heritage surfaces ------------------------------------------------ */
  --color-bg: #fff6ea;             /* page ground, lighter than the card      */
  --color-surface: #fffdf9;
  --color-surface-2: #fbe6cb;      /* the card's parchment — tinted bands     */
  --color-surface-sunken: #f6dcbc;
  --paper-ornament: rgba(192, 39, 45, 0.05);  /* damask watermark, 3–7% rule  */
  /* The menu card's watermark, redrawn as a tile.
     Opacity is baked into the stroke rather than applied to a wrapper element:
     body's background propagates to the viewport canvas, so a body::before at a
     negative z-index paints BEHIND that canvas and is never visible. Used
     directly as a background layer, there is no stacking to get wrong. */
  --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c0272d' stroke-opacity='0.085' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M36 12c5 6 5 12 0 18-5-6-5-12 0-18z'/%3E%3Cpath d='M36 42c5 6 5 12 0 18-5-6-5-12 0-18z'/%3E%3Cpath d='M12 36c6 5 12 5 18 0-6-5-12-5-18 0z'/%3E%3Cpath d='M42 36c6 5 12 5 18 0-6-5-12-5-18 0z'/%3E%3Ccircle cx='36' cy='36' r='3.2'/%3E%3Cpath d='M0 36 36 0l36 36-36 36z' stroke-width='0.7'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='72' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='72' r='2.4'/%3E%3Ccircle cx='72' cy='72' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --paper-texture-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c0272d' stroke-opacity='0.03' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M36 12c5 6 5 12 0 18-5-6-5-12 0-18z'/%3E%3Cpath d='M36 42c5 6 5 12 0 18-5-6-5-12 0-18z'/%3E%3Cpath d='M12 36c6 5 12 5 18 0-6-5-12-5-18 0z'/%3E%3Cpath d='M42 36c6 5 12 5 18 0-6-5-12-5-18 0z'/%3E%3Ccircle cx='36' cy='36' r='3.2'/%3E%3Cpath d='M0 36 36 0l36 36-36 36z' stroke-width='0.7'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='72' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='72' r='2.4'/%3E%3Ccircle cx='72' cy='72' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --paper-texture-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M36 12c5 6 5 12 0 18-5-6-5-12 0-18z'/%3E%3Cpath d='M36 42c5 6 5 12 0 18-5-6-5-12 0-18z'/%3E%3Cpath d='M12 36c6 5 12 5 18 0-6-5-12-5-18 0z'/%3E%3Cpath d='M42 36c6 5 12 5 18 0-6-5-12-5-18 0z'/%3E%3Ccircle cx='36' cy='36' r='3.2'/%3E%3Cpath d='M0 36 36 0l36 36-36 36z' stroke-width='0.7'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='72' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='72' r='2.4'/%3E%3Ccircle cx='72' cy='72' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --paper-texture-size: 72px 72px;

  /* ---- ornament: drawn from the menu card's own border vocabulary --------- */
  /* the scalloped valance that runs along the foot of the printed card */
  --edge-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='13' viewBox='0 0 30 13'%3E%3Cpath d='M0 0h30v1.5a15 15 0 0 1-30 0z' fill='%23ee7f2d'/%3E%3Ccircle cx='15' cy='9.5' r='1.6' fill='%23c0272d' opacity='.55'/%3E%3C/svg%3E");
  --edge-scallop-size: 30px 13px;
  /* a section break, used where two bands meet — never just to fill space */
  --orn-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cg fill='none' stroke='%23c0272d' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 9h38'/%3E%3Cpath d='M82 9h38'/%3E%3Cpath d='M60 2c6 4 6 10 0 14-6-4-6-10 0-14z'/%3E%3Cpath d='M52 9c3-3 5-3 8 0-3 3-5 3-8 0z'/%3E%3Cpath d='M68 9c-3-3-5-3-8 0 3 3 5 3 8 0z'/%3E%3C/g%3E%3Ccircle cx='44' cy='9' r='1.6' fill='%23ee7f2d'/%3E%3Ccircle cx='76' cy='9' r='1.6' fill='%23ee7f2d'/%3E%3C/svg%3E");

  /* ---- text ------------------------------------------------------------- */
  --color-text: #2a211c;           /* 14.72:1 on bg                           */
  --color-muted: #6b5a4e;          /* 6.14:1 on bg — AA for body text         */
  --color-on-primary: #fffdf9;
  --color-on-accent: var(--color-text);   /* never white: white/saffron = 2.72:1 */

  /* ---- lines ------------------------------------------------------------ */
  --color-line: rgba(42, 33, 28, 0.12);
  --color-line-strong: rgba(42, 33, 28, 0.24);

  /* ---- status ----------------------------------------------------------- */
  --color-success: #2f6b3a;
  --color-success-soft: #e4f0e5;
  --color-warning: #9a6410;
  --color-warning-soft: #fbeed6;
  --color-danger: #a32b1e;
  --color-danger-soft: #fae3df;
  --color-info: #1f5670;
  --color-info-soft: #e2eef4;

  /* ---- typography ------------------------------------------------------- */
  --font-display: "Tiro Devanagari Marathi", Georgia, "Times New Roman", serif;
  --font-body: "Mukta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-caption: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.0625rem;
  --fs-h4: 1.125rem;
  --fs-h3: 1.375rem;
  --fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --fs-h1: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
  --fs-display: clamp(2.125rem, 1.3rem + 3.6vw, 3.5rem);

  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.65;
  /* Devanagari needs more room than Latin or it looks cramped */
  --lh-devanagari: 1.85;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-label: 0.08em;

  /* ---- spacing (4px base) ----------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;
  --space-10: 7rem;

  /* ---- radius ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ---- elevation (warm-tinted, never grey) ------------------------------ */
  --shadow-xs: 0 1px 2px rgba(90, 52, 30, 0.06);
  --shadow-sm: 0 1px 3px rgba(90, 52, 30, 0.08), 0 1px 2px rgba(90, 52, 30, 0.04);
  --shadow-md: 0 4px 16px rgba(90, 52, 30, 0.10);
  --shadow-lg: 0 12px 32px rgba(90, 52, 30, 0.14);
  --shadow-xl: 0 24px 56px rgba(90, 52, 30, 0.18);

  /* ---- layout ----------------------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --wrap-wide: 1400px;
  --header-h: 92px;
  --announce-h: 34px;

  /* ---- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---- z-index scale ---------------------------------------------------- */
  --z-sticky: 100;
  --z-toolbar: 90;   /* shop filter bar: under the header, over the grid */
  --z-fab: 120;
  --z-actionbar: 130;
  --z-scrim: 200;
  --z-drawer: 210;
  --z-modal: 220;
  --z-toast: 300;
}

@media (min-width: 768px) {
  :root { --header-h: 120px; }
}