/* ==========================================================================
   Satya Since 1973 — Storefront design tokens

   The client's own palette, sampled from their site and their logo:
     #5D0003  the maroon of their header
     gold     from the logo artwork — #C8901E shadow, #E5BC45 mid, #F0E070 lift
     #C7DFDB  the sage of their secondary navigation

   Separate bundle from the admin by design (DEVELOPMENT_RULES.md §5).
   ========================================================================== */

:root {
  /* ---- Maroon ------------------------------------------------------------ */
  --s-maroon-950: #1c0001;
  --s-maroon-900: #2e0002;
  --s-maroon-800: #470002;
  --s-maroon-700: #5d0003;   /* the brand maroon */
  --s-maroon-600: #7a0a10;
  --s-maroon-500: #9b2229;
  --s-maroon-200: #e8c9cb;
  --s-maroon-100: #f7e9ea;

  /* ---- Gold -------------------------------------------------------------- */
  --s-gold-700: #96690a;
  --s-gold-600: #b8860f;
  --s-gold-500: #d6a62e;
  --s-gold-400: #e5bc45;
  --s-gold-300: #f0d878;
  --s-gold-100: #fbf3dd;

  /* ---- Sage — the calm counterweight to all that warmth ------------------- */
  --s-sage-600: #4e8378;
  --s-sage-500: #7fb3aa;
  --s-sage-300: #a9cdc7;
  --s-sage-200: #c7dfdb;
  --s-sage-100: #e4f1ef;

  /* ---- Warm neutrals ----------------------------------------------------- */
  --s-ink: #1d1716;
  --s-ink-soft: #4a3e3b;
  --s-muted: #7a6c68;
  --s-line: #e7dfdb;
  --s-line-soft: #f2ebe8;
  --s-cream: #fdfaf8;
  --s-surface: #ffffff;
  --s-white: #ffffff;

  /* ---- The warm paper ------------------------------------------------------

     The sand the cards, the rules and the header's edge are drawn with. It was
     written straight into the stylesheet — `#e8d9bd` alone eleven times — until
     the shop's colours became something a merchant could choose, at which point
     a green header would have sat above eleven pieces of maroon-era sand.

     Five shades, five tokens, each holding EXACTLY the value it replaced. The
     first attempt folded them into three and would have shifted five places on
     the live shop the moment the update was applied — `#e8d6a4` is a warmer,
     more golden sand than `#e8d9bd`, and `#f0e6d2` is lighter than `#ecdfc6`.
     Close enough to miss in a diff, far enough apart to see side by side, and
     the update promises that nothing changes until a palette is chosen. */
  --s-sand: #e8d9bd;        /* the edge of every card and panel */
  --s-sand-warm: #e8d6a4;   /* the coupon row, a shade more golden */
  --s-sand-soft: #ecdfc6;   /* under the header and the category strip */
  --s-sand-tint: #f0e6d2;   /* the palest of the edges */
  --s-sand-pale: #fdf8ef;   /* a whole panel's ground */

  /* ---- Status ------------------------------------------------------------ */
  --s-success: #1a7f4b;
  --s-success-soft: #e3f5eb;
  --s-danger: #b3261e;
  --s-danger-soft: #fdeceb;
  --s-warn: #8a5a00;
  --s-warn-soft: #fdf3dc;

  /* ---- Type -------------------------------------------------------------- */
  /* A display serif carries the "since 1973" weight the brand trades on; the
     body face stays a workhorse sans so long descriptions stay readable. Both
     have full local fallbacks, so a blocked font request costs polish, never
     legibility. */
  --s-font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --s-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --s-text-2xs: 0.6875rem;
  --s-text-xs: 0.75rem;
  --s-text-sm: 0.8125rem;
  --s-text-md: 0.9375rem;
  --s-text-lg: 1.0625rem;
  --s-text-xl: 1.25rem;
  --s-text-2xl: 1.5rem;
  --s-text-3xl: 1.875rem;
  --s-text-4xl: 2.5rem;
  --s-text-5xl: 3.25rem;

  --s-tracking-caps: 0.16em;
  --s-tracking-wide: 0.05em;

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

  /* The page gutter and the maximum measure. Wide enough to use a large
     screen, capped so a product grid never becomes a spreadsheet. */
  --s-gutter: 1rem;
  --s-max: 88rem;

  /* ---- Shape ------------------------------------------------------------- */
  --s-radius-sm: 6px;
  --s-radius: 12px;
  --s-radius-lg: 18px;
  --s-radius-pill: 999px;

  --s-shadow-sm: 0 1px 2px rgb(29 23 22 / 0.05);
  --s-shadow: 0 4px 16px rgb(29 23 22 / 0.07), 0 1px 3px rgb(29 23 22 / 0.05);
  --s-shadow-lg: 0 18px 48px rgb(29 23 22 / 0.14);
  --s-shadow-xl: 0 32px 72px rgb(29 23 22 / 0.20);

  /* ---- Motion ------------------------------------------------------------ */
  --s-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --s-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --s-fast: 160ms;
  --s-base: 260ms;
  --s-slow: 420ms;

  /* ---- Layers ------------------------------------------------------------ */
  --s-z-header: 100;
  --s-z-bottomnav: 110;
  --s-z-scrim: 200;
  --s-z-drawer: 210;
  --s-z-modal: 220;
  --s-z-toast: 300;

  /* Room for the phone's bottom navigation, so a sticky footer control never
     sits underneath it. */
  --s-bottomnav-height: 3.875rem;
}

@media (min-width: 48rem) {
  :root { --s-gutter: 1.75rem; }
}

@media (min-width: 80rem) {
  :root { --s-gutter: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --s-fast: 0ms; --s-base: 0ms; --s-slow: 0ms; }
}