/* ==========================================================================
   PddFalcon storefront — design tokens

   The brand's own two colours come straight from the catalogue logo:
     navy  #0D2454   the "Falcon" wordmark
     red   #A31B06   the falcon's wing
   Around them: a marketplace-grey canvas, white product cards, a deal-yellow
   for offers and a steel-blue for delivery/trust lines. Values are the only
   thing the admin "Colours" screen changes; every rule reads tokens.

   Separate bundle from the admin on purpose: a look change for shoppers must
   never alter the interface staff work in.
   ========================================================================== */

:root {
  /* ---- Brand navy ---------------------------------------------------- */
  --s-brand-950: #061031;
  --s-brand-900: #0a1a45;
  --s-brand-800: #0d2454;   /* logo navy — header, footer, headings */
  --s-brand-700: #12306e;
  --s-brand-600: #1b4494;
  --s-brand-500: #2a5ac0;   /* links */
  --s-brand-200: #c9d6f2;
  --s-brand-100: #e8eefa;

  /* ---- Brand red (accent / call to action) ------------------------- */
  --s-accent-700: #7e0f04;
  --s-accent-600: #a31b06;  /* logo red */
  --s-accent-500: #c4260c;  /* primary buttons */
  --s-accent-400: #e0432a;
  --s-accent-300: #f08a7a;
  --s-accent-100: #fde9e5;

  /* ---- Deal yellow (offers, badges, ratings) ------------------------ */
  --s-cool-600: #e39b00;
  --s-cool-500: #ffb800;
  --s-cool-300: #ffd466;
  --s-cool-200: #ffe8a8;
  --s-cool-100: #fff6dc;

  /* ---- Neutrals ------------------------------------------------------ */
  --s-ink: #111827;
  --s-ink-soft: #374151;
  /* Darkened from #6b7280 so muted copy still clears 4.5:1 on the grey tile
     (#f3f5f8), not only on white — measured 4.43:1 before, 4.65:1 now. */
  --s-muted: #666f7d;
  --s-line: #e6eaf2;
  --s-line-soft: #eef1f7;
  --s-cream: #f4f6fa;       /* page canvas */
  --s-surface: #ffffff;
  --s-white: #ffffff;

  /* ---- Status -------------------------------------------------------- */
  --s-success: #16803c;
  --s-success-soft: #e6f6ec;
  --s-danger: #b42318;
  --s-danger-soft: #fdecea;
  --s-warn: #8a5a00;
  --s-warn-soft: #fff4d6;

  /* ---- Type ---------------------------------------------------------- */
  --s-font-display: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-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.12em;
  --s-tracking-wide: 0.04em;

  /* ---- 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;

  --s-gutter: 0.75rem;
  --s-max: 90rem;

  /* ---- Shape --------------------------------------------------------- */
  --s-radius-sm: 6px;
  --s-radius: 14px;
  --s-radius-lg: 20px;
  --s-radius-pill: 999px;

  --s-shadow-sm: 0 1px 2px rgb(17 24 39 / 0.06);
  --s-shadow: 0 2px 8px rgb(17 24 39 / 0.08), 0 1px 2px rgb(17 24 39 / 0.04);
  --s-shadow-lg: 0 12px 32px rgb(13 36 84 / 0.14);
  --s-shadow-xl: 0 24px 56px rgb(13 36 84 / 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: 140ms;
  --s-base: 220ms;
  --s-slow: 380ms;

  /* ---- 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;

  --s-bottomnav-height: 3.75rem;
  --s-safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

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

/* Dark theme — chosen explicitly, or inherited from the device. */
:root[data-theme="dark"] {
  --s-ink: #f3f4f6;
  --s-ink-soft: #d1d5db;
  --s-muted: #9ca3af;
  --s-line: #2a3446;
  --s-line-soft: #1f2837;
  --s-cream: #0b1220;
  --s-surface: #131c2e;
  --s-brand-100: #17244a;
  --s-brand-200: #23356b;
  --s-brand-500: #7aa2ff;
  --s-accent-100: #3a1510;
  --s-cool-100: #3a2e08;
  --s-success-soft: #0f2b1a;
  --s-danger-soft: #3a1512;
  --s-warn-soft: #3a2a08;
  --s-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
  --s-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}

/* System dark mode is NOT applied automatically: the admin decides the default
   and a visitor may choose; both set data-theme on <html>. */

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