/* ==========================================================================
   Sharma Kirana - Design Tokens
   --------------------------------------------------------------------------
   Single source of truth. Every colour, space, radius, shadow and duration
   in the product resolves to a variable declared here. Components never
   hardcode a hex value.

   Palette direction: "Sindoor + Warm Paper"
   The reference store leans on a stock green/red commodity look. This system
   keeps the warmth a kirana shop needs (spice red, marigold, cream paper)
   and sets it on warm neutrals rather than cool grey, so the page reads like
   a market shelf and not a SaaS dashboard. One accent, locked, everywhere.

   Light mode only. There is no dark theme by design: the palette is the
   brand, and this shop is a daylight business.

   Contrast: every text/surface pair below is measured against the WCAG AA
   floor of 4.5:1 for body and 3:1 for large text. Ratios are noted inline
   where a value was chosen specifically to clear the bar.
   ========================================================================== */

:root {
  /* --- Warm neutral ramp ------------------------------------------------
     Lightness matched to a standard grey scale, hue shifted toward paper.
     Surfaces carry a faint warmth so product artwork sits on a shelf-like
     ground rather than on office grey.                                  */
  --warm-50:  #faf7f4;   /* page background */
  --warm-100: #f3eee9;   /* sunken panels, chips */
  --warm-200: #e6ded7;   /* hairline borders */
  --warm-300: #d2c8c0;   /* strong borders, dividers */
  --warm-400: #a89c93;   /* disabled, faintest text */
  --warm-500: #736a63;   /* subtle text  - 4.96:1 on warm-50 */
  --warm-600: #574e48;   /* muted text   - 7.60:1 on warm-50 */
  --warm-700: #3d3631;   /* headings on tinted panels */
  --warm-800: #29231f;
  --warm-900: #1c1815;   /* body text    - 16.52:1 on warm-50 */
  --warm-950: #12100e;

  /* --- Accent: single locked hue (spice red) + supporting warm tones ---- */
  --chilli-50:  #fdf3f2;
  --chilli-100: #fbe3e1;
  --chilli-200: #f6c8c4;
  --chilli-300: #eda19b;
  --chilli-400: #e06f66;
  --chilli-500: #cf4639;
  --chilli-600: #b32f24;   /* 5.88:1 on warm-50, 6.27:1 with white text */
  --chilli-700: #93251d;
  --chilli-800: #6f1c16;
  --chilli-900: #4d1310;

  /* Marigold is used ONLY for price/discount emphasis, never as a second
     brand accent. Text value chosen for contrast on deal backgrounds.    */
  --marigold-100: #fdf1d6;
  --marigold-300: #f6cd74;
  --marigold-500: #e0a020;
  --marigold-700: #8a5e0b;  /* 5.11:1 on marigold-100 */

  /* --- Semantic feedback ------------------------------------------------
     WhatsApp green is darkened from the brand's #25D366 so white button
     labels clear AA. The bright brand green only manages 3.03:1, which
     fails for text; #0f7f3b gives 5.10:1 with white and 4.78:1 on the page. */
  --wa-500: #0f7f3b;       /* white text 5.10:1 */
  --wa-600: #0b6b31;       /* hover */
  --ok-500: #2f8f5b;
  --warn-500: #9a6510;     /* 4.94:1 on warm-50 */
  --bad-500: #b3271a;      /* 5.61:1 on warm-50 */

  /* --- Type scale: 1.2 ratio at the small end, 1.25 at display ---------- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --text-2xs: 0.6875rem;  /* 11px - badges only */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.8125rem;  /* 13px */
  --text-md:  0.9375rem;  /* 15px - body default */
  --text-lg:  1.0625rem;  /* 17px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* --- Space scale: 4px base ------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* --- Radius: one documented system -----------------------------------
     cards 16, inputs 12, buttons 10, pills full. Followed everywhere.   */
  --r-card: 16px;
  --r-input: 12px;
  --r-btn: 10px;
  --r-pill: 999px;
  --r-sm: 8px;

  /* --- Elevation: tinted warm, never pure black ------------------------ */
  --sh-1: 0 1px 2px rgb(58 42 32 / 0.07), 0 1px 3px rgb(58 42 32 / 0.05);
  --sh-2: 0 2px 6px rgb(58 42 32 / 0.08), 0 1px 2px rgb(58 42 32 / 0.05);
  --sh-3: 0 8px 24px rgb(58 42 32 / 0.10), 0 2px 6px rgb(58 42 32 / 0.06);
  --sh-4: 0 18px 48px rgb(58 42 32 / 0.16), 0 4px 12px rgb(58 42 32 / 0.08);
  --sh-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.65);

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;

  /* --- Layout ---------------------------------------------------------- */
  --page-max: 1320px;
  --header-h: 68px;

  /* --- Z-index scale: systemic only, documented ----------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-sheet: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-palette: 600;

  color-scheme: light;
}

/* ==========================================================================
   Semantic layer
   Components reference these names only, never the ramp directly, so the
   palette can shift without touching a single component rule.
   ========================================================================== */
:root {
  --bg: var(--warm-50);
  --bg-sunken: var(--warm-100);
  --surface: #ffffff;
  --surface-2: #f7f2ee;
  --surface-hover: var(--warm-100);

  --text: var(--warm-900);
  --text-muted: var(--warm-600);
  --text-subtle: var(--warm-500);
  --text-inverse: #ffffff;

  --border: var(--warm-200);
  --border-strong: var(--warm-300);

  --accent: var(--chilli-600);
  --accent-hover: var(--chilli-700);
  --accent-soft: var(--chilli-50);
  --accent-soft-border: var(--chilli-200);
  --accent-text: var(--chilli-700);
  --on-accent: #ffffff;

  --price: var(--warm-900);
  --deal-bg: var(--marigold-100);
  --deal-text: var(--marigold-700);

  --focus-ring: var(--chilli-500);
  --skeleton-a: var(--warm-100);
  --skeleton-b: var(--warm-200);

  --scrim: rgb(28 24 21 / 0.46);
}

/* Reduced motion: collapse every duration. Opacity changes still read. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
}