/* ============================================================================
   SHARMA KIRANA — DESIGN TOKENS
   ----------------------------------------------------------------------------
   One palette, one radius system, one type stack, one accent. Locked page-wide.
   Palette: white surfaces, sunflower yellow accents, and warm readable text.
   ========================================================================= */

/* ---- Fonts: self-hosted variable stack, no Google <link> in production ---- */
@font-face {
  font-family: "Grotesk Local";
  src: local("Inter"), local("Segoe UI Variable Text"), local("Segoe UI");
  font-display: swap;
  font-weight: 100 900;
}

:root {
  /* ---------- Type scale ---------- */
  --font-sans: "Inter Tight", "Grotesk Local", 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;

  --fs-3xs: 0.625rem;  /* 10px — badge only */
  --fs-2xs: 0.6875rem; /* 11px — meta */
  --fs-xs: 0.75rem;    /* 12px — chips, labels */
  --fs-sm: 0.8125rem;  /* 13px — card titles */
  --fs-md: 0.875rem;   /* 14px — body controls */
  --fs-base: 0.9375rem;/* 15px — body */
  --fs-lg: 1.0625rem;  /* 17px — section heads */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-3xl: 1.875rem;  /* 30px */
  --fs-4xl: 2.375rem;  /* 38px — hero */

  /* ---------- Radius: ONE scale. card 18 / control 11 / pill full ---------- */
  --r-card: 18px;
  --r-control: 11px;
  --r-chip: 999px;
  --r-tile: 14px;

  /* ---------- Motion ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  /* ---------- Spacing rhythm ---------- */
  --gutter: 1rem;
  --section-gap: 1.5rem;
  --panel-padding: 1rem;
  --page-start: 1rem;
  --shell-max: 1400px;
  --header-h: 116px;

  /* ---------- Z-index scale (systemic only, never arbitrary) ---------- */
  --z-base: 0;
  --z-sticky: 20;
  --z-header: 30;
  --z-bottombar: 40;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
}

/* ============================ LIGHT (default) ============================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* White base with soft yellow supporting surfaces */
  --bg: #ffffff;
  --bg-sunken: #faf8ed;
  --surface: #ffffff;
  --surface-2: #fffef8;
  --surface-3: #fff9df;

  --border: #e7e3dc;
  --border-strong: #d8d3c9;
  --border-faint: #efece6;

  --text-strong: #1c1a17;
  --text: #4a453d;
  /* muted = real body/meta text. Contrast-checked: 5.31 on --bg, 5.58 on --surface. */
  --text-muted: #6f6759;
  /* subtle = decorative only (hover affordances, disabled, strikethrough pair).
     Do NOT use for text that carries meaning; it does not reach AA at small sizes. */
  --text-subtle: #8a8374;
  --text-invert: #fdfcfa;

  /* Single accent: sunflower yellow */
  --accent: #f5cf28;
  --accent-hover: #e6bd17;
  --accent-active: #d5ae08;
  --accent-soft: #fff8d6;
  --accent-soft-2: #fff0ab;
  --accent-border: #ead579;
  --accent-text: #675000;
  --on-accent: #29230c;

  /* Secondary signal — used ONLY for discount/urgency, never as a 2nd brand */
  --alert: #786000;
  --alert-soft: #fff5c2;
  --alert-border: #ead579;

  --star: #d99a2b;
  --whatsapp: #675000;

  --shadow-xs: 0 1px 2px rgb(28 26 23 / 0.05);
  --shadow-sm: 0 1px 3px rgb(28 26 23 / 0.07), 0 1px 2px rgb(28 26 23 / 0.04);
  --shadow-md: 0 4px 14px -2px rgb(28 26 23 / 0.09),
    0 2px 6px -2px rgb(28 26 23 / 0.05);
  --shadow-lg: 0 18px 40px -12px rgb(28 26 23 / 0.18),
    0 6px 16px -8px rgb(28 26 23 / 0.08);
  --shadow-drawer: -24px 0 60px -20px rgb(28 26 23 / 0.24);
  --ring: 0 0 0 3px rgb(169 128 0 / 0.3);

  --skeleton-a: #ece9e3;
  --skeleton-b: #f6f4f0;
}

/* ============================ DARK ============================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14130f;
  --bg-sunken: #100f0c;
  --surface: #1d1b16;
  --surface-2: #232019;
  --surface-3: #2a271f;

  --border: #322e26;
  --border-strong: #423d32;
  --border-faint: #292620;

  --text-strong: #f6f3ee;
  --text: #cdc7bb;
  /* Contrast-checked: 6.61 on --bg, 6.12 on --surface. */
  --text-muted: #a09a88;
  /* Decorative only, same rule as light mode. */
  --text-subtle: #8f8878;
  --text-invert: #14130f;

  /* Accent lifted for contrast on dark, same hue family */
  --accent: #f5cf28;
  --accent-hover: #ffdf5c;
  --accent-active: #e6bd17;
  --accent-soft: #302911;
  --accent-soft-2: #403716;
  --accent-border: #66551d;
  --accent-text: #f7de79;
  --on-accent: #29230c;

  --alert: #f5cf28;
  --alert-soft: #302911;
  --alert-border: #66551d;

  --star: #e0ac47;
  --whatsapp: #f5cf28;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 14px -2px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.65),
    0 6px 16px -8px rgb(0 0 0 / 0.4);
  --shadow-drawer: -24px 0 60px -20px rgb(0 0 0 / 0.7);
  --ring: 0 0 0 3px rgb(245 207 40 / 0.34);

  --skeleton-a: #262319;
  --skeleton-b: #302c22;
}

/* ================= Reduced motion: collapse everything ================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --ease-spring: linear;
  }
}