/* Zaviya Wear — shared design tokens (skills/storefront-design §"Shared design tokens")
   The same six scroll-craft tokens + two fonts drive every page: home, collection,
   product, size guide, and the chat widget, so the site reads as one brand.
   Do not fork this file per page — extend it, and keep widget/widget.css in sync
   with the palette (the widget ships its own copy so it stays a single script). */
:root {
  --sc-canvas: #F4F2EE;
  --sc-surface: #FFFFFF;
  --sc-ink: #1B2233;
  --sc-ink-soft: #646B7A;
  --sc-accent: #E0A33A;      /* saffron */
  --sc-accent-ink: #1C2B4A;  /* indigo */
  --sc-font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --sc-font-text: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* extended, non-scroll-craft tokens used by the commerce layer */
  --line: #E3E1DA;
  --rose: #B8455E;
  --ok: #2F8A5B;
  --focus: var(--sc-accent);
  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-card: 0 14px 34px -18px rgba(28, 43, 74, .28), 0 2px 8px rgba(28, 43, 74, .08);
  --gutter: 16px;
}

/* --sc-accent and --sc-accent-ink do NOT flip between themes: they are brand colours
   (saffron surface, indigo ink-on-saffron), not neutrals, and saffron#E0A33A/indigo#1C2B4A
   pass AA (6.3:1) against each other in both light and dark contexts. A previous version
   flipped --sc-accent-ink to a light blue for dark mode, which broke every primary button
   (white text on a pale blue fill) — see the M6b report for the contrast numbers. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sc-canvas: #0E1118;
    --sc-surface: #171C28;
    --sc-ink: #E7EBF3;
    --sc-ink-soft: #9AA3B5;
    --line: #262D3C;
    --shadow-card: 0 14px 34px -18px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sc-canvas: #0E1118;
  --sc-surface: #171C28;
  --sc-ink: #E7EBF3;
  --sc-ink-soft: #9AA3B5;
  --line: #262D3C;
  --shadow-card: 0 14px 34px -18px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}