/* ============================================================================
   VIOLET GROCERY — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Palette: white surfaces, one violet accent, near-neutrals warmed just enough
   to sit next to the product photography. Light mode only.

   The spacing rhythm (gutter / section-gap / panel-padding / page-start) is
   carried over from the reference build so vertical cadence matches, while the
   colour, radius and type layers are new.
   ========================================================================= */

@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 (10 → 40) ---------- */
  --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, unit pills */
  --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.5rem;     /* 40px — display */

  /* ---------- Radius: four values, each with one job ---------- */
  --r-frame: 4px;      /* image wells and thumbnails only */
  --r-card: 16px;      /* surfaces */
  --r-control: 10px;   /* inputs, secondary controls */
  --r-tile: 12px;      /* icon tiles */
  --r-pill: 999px;     /* every interactive control */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---------- Spacing rhythm (reference cadence) ---------- */
  --gutter: 1rem;
  --section-gap: 1.75rem;
  --panel-padding: 1rem;
  --page-start: 1rem;
  --shell-max: 1320px;
  --header-h: 68px;
  --utility-h: 34px;
  /* How far a sticky element below the header must sit from the top of the
     viewport. The utility strip scrolls away, so it is not counted. */
  --top-offset: 68px;
}

@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
    --section-gap: 2.5rem;
    --page-start: 1.75rem;
  }
}

/* ============================== COLOUR ==============================
   Violet is the only brand hue. Amber carries discount, green carries
   stock. Neither is ever decorative.
   ================================================================== */
:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-sunken: #f7f5fb;
  --surface: #ffffff;
  --surface-2: #f9f7fd;
  --surface-hover: #f4f1fa;

  --border: #e8e4f0;
  --border-strong: #d5cfe4;
  --border-faint: #f0edf7;

  --text-strong: #191527;
  --text: #453f57;
  /* Contrast-checked: 7.34 on --bg, 7.03 on --surface-2. */
  --text-muted: #5b5470;
  /* Contrast-checked: 5.12 on --bg, 4.91 on --surface-2. Body-safe. */
  --text-subtle: #6f6885;
  --text-invert: #ffffff;

  /* Single accent: violet */
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --accent-active: #4c1d95;
  --accent-soft: #f3eefe;
  --accent-soft-2: #e8dffe;
  --accent-border: #d9cbfb;
  --accent-text: #5b21b6;
  --on-accent: #ffffff;

  /* Discount signal — amber, never decoration */
  --deal-bg: #fdf3e0;
  --deal-text: #8a5208;
  --deal-border: #f2ddb8;

  /* Stock signal — green */
  --ok-bg: #e9f7ef;
  --ok-text: #14663c;
  --ok-border: #c6e8d5;

  /* Out of stock / destructive */
  --bad-bg: #fdeceb;
  --bad-text: #9a2118;
  --bad-border: #f5cfcb;

  --star: #c98a12;
  --whatsapp: #0f7f3b;
  --whatsapp-hover: #0b6b31;

  --sh-1: 0 1px 2px rgb(25 21 39 / 0.05);
  --sh-2: 0 1px 3px rgb(25 21 39 / 0.07), 0 1px 2px rgb(25 21 39 / 0.04);
  --sh-3: 0 6px 20px -6px rgb(25 21 39 / 0.12), 0 2px 6px -2px rgb(25 21 39 / 0.06);
  --sh-4: 0 20px 44px -14px rgb(49 24 105 / 0.22), 0 6px 16px -8px rgb(25 21 39 / 0.08);
  --sh-drawer: -28px 0 68px -24px rgb(35 18 74 / 0.26);
  --ring: 0 0 0 3px rgb(109 40 217 / 0.26);

  --skeleton-a: #ece8f5;
  --skeleton-b: #f6f4fb;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --ease-spring: linear;
  }
}