/* TDW SmashZone design tokens: one source for the public site, admin and POS.
   Plain CSS custom properties, so no build step is needed. Loaded first by every layout.

   Values come from the design demo (branch design-demo, resources/css/tokens.css,
   "Gold Standard" palette). Names keep the --tdw- prefix so they can't collide with
   the legacy public stylesheet (style.css defines its own --gold, --navy, --line...).
   The demo's own short names (--gold, --s-2, --text-sm...) are aliased to these
   inside the Vite bundle for ported pages only (resources/css/site.css).

   Palette rule of thumb from the demo: about 60% ink and navy, 30% cream,
   10% gold (actions, prices and big numerals only). The electric blue accent is for
   live status, links and focus only.

   Semantic aliases (--tdw-bg, --tdw-fg, --tdw-surface...) switch with the theme:
   dark is the default (public site, admin). [data-tdw-theme="light"] is the
   demo's cream "light section" set, for dense reading content and the POS. */

:root {
  /* Palette: "Gold Standard" (demo) */
  --tdw-color-black: #07090d;        /* page base */
  --tdw-color-rich-black: #0b0f16;   /* alternate dark band */
  --tdw-color-navy: #0b1424;         /* section band */
  --tdw-color-navy-raised: #12203a;  /* cards and panels on dark */
  --tdw-color-gold: #e8b73c;         /* the one action color: buttons, prices, big numerals */
  --tdw-color-gold-light: #f6cf6e;   /* hover, small gold text on dark */
  --tdw-color-gold-ink: #7a5a00;     /* gold-family text on cream (5:1+) */
  --tdw-color-accent: #3aa0ff;       /* electric blue: live status, links, focus only */
  --tdw-color-accent-ink: #0a5ca8;   /* the blue accent on cream (5.6:1) */
  --tdw-color-text: #f6f0e2;         /* warm cream text on dark */
  --tdw-color-white: #ffffff;
  --tdw-color-cream: #f3ead7;        /* the one light surface */
  --tdw-color-paper: #fbf7ee;        /* cards on cream */
  --tdw-color-muted: #b9b4a6;        /* secondary text on dark */
  --tdw-color-ink: #0b0e14;          /* text on cream or gold */
  --tdw-color-ink-muted: #4a4a44;    /* secondary text on cream */
  --tdw-color-line: rgb(246 240 226 / 14%);
  --tdw-color-line-dark: rgb(11 14 20 / 16%);

  /* Status. On dark: the demo's danger and success. On cream/light: the -ink
     variants (demo's danger-on-light; success, warning and info added for the
     POS and admin, each checked at 4.5:1 on its -wash and on cream). */
  --tdw-color-danger: #ff8a80;
  --tdw-color-danger-ink: #b3261e;
  --tdw-color-danger-wash: #fbe4e1;
  --tdw-color-success: #6fdc9b;
  --tdw-color-success-ink: #17733d;
  --tdw-color-success-wash: #e3f4e8;
  --tdw-color-warning-ink: #7a5a00;  /* same as gold-ink */
  --tdw-color-warning-wash: #fbefcc;
  --tdw-color-info-ink: #0a5ca8;     /* same as accent-ink */
  --tdw-color-info-wash: #e4effa;

  /* Scrims (dark overlays on photography) and veils (cream washes on dark):
     the only alpha colors in the system. */
  --tdw-scrim-10: rgb(7 9 13 / 10%);
  --tdw-scrim-30: rgb(7 9 13 / 28%);
  --tdw-scrim-55: rgb(7 9 13 / 55%);
  --tdw-scrim-70: rgb(7 9 13 / 72%);
  --tdw-scrim-92: rgb(7 9 13 / 93%);
  --tdw-veil-8: rgb(246 240 226 / 8%);
  --tdw-veil-15: rgb(246 240 226 / 15%);
  --tdw-veil-55: rgb(246 240 226 / 55%);
  --tdw-veil-85: rgb(246 240 226 / 86%);
  --tdw-gold-wash: rgb(232 183 60 / 14%);
  --tdw-success-wash-dark: rgb(111 220 155 / 8%);

  /* Type: Archivo (display, variable width axis) and Inter (body). Seven sizes. */
  --tdw-font-display: "Archivo Variable", "Archivo", system-ui, sans-serif;
  --tdw-font-body: "Inter Variable", "Inter", system-ui, sans-serif;
  --tdw-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --tdw-fs-1: 0.875rem;                                  /* 14: notes, labels, secondary copy */
  --tdw-fs-2: 1rem;                                      /* 16: body and UI */
  --tdw-fs-3: 1.125rem;                                  /* 18: lead paragraphs */
  --tdw-fs-4: 1.375rem;                                  /* 22: card titles, h3 */
  --tdw-fs-5: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);   /* 28-40: section titles, prices, numerals */
  --tdw-fs-6: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);     /* 28-48: page titles */
  --tdw-fs-7: clamp(2.5rem, 1.3rem + 4.6vw, 4.5rem);     /* 40-72: home hero only */
  --tdw-lh-tight: 1.05;
  --tdw-lh-snug: 1.25;
  --tdw-lh-body: 1.6;
  --tdw-fw-regular: 400;
  --tdw-fw-semibold: 600;
  --tdw-fw-bold: 700;
  --tdw-fw-black: 800;
  --tdw-tracking-eyebrow: 0.14em;
  --tdw-stretch-display: 112%;  /* Archivo width axis: display roles only (titles, prices, numerals) */
  --tdw-measure: 70ch;          /* max line length for body copy */

  /* Space: 8px scale plus a 4px half step */
  --tdw-s-half: 4px;
  --tdw-s-1: 8px;
  --tdw-s-2: 16px;
  --tdw-s-3: 24px;
  --tdw-s-4: 32px;
  --tdw-s-5: 40px;
  --tdw-s-6: 48px;
  --tdw-s-8: 64px;
  --tdw-s-10: 80px;
  --tdw-s-12: 96px;

  /* Layout */
  --tdw-container: 1200px;
  --tdw-gutter: var(--tdw-s-2);
  --tdw-section-y: var(--tdw-s-8);
  --tdw-header-h: 64px;
  --tdw-book-bar-h: 72px;  /* sticky mobile Book bar */

  /* Shape and depth */
  --tdw-radius-card: 16px;
  --tdw-radius-control: 12px;
  --tdw-radius-pill: 999px;
  --tdw-shadow-card: 0 8px 24px rgb(0 0 0 / 35%);
  --tdw-shadow-lift: 0 16px 40px rgb(0 0 0 / 50%);
  --tdw-shadow-card-light: 0 8px 24px rgb(7 9 13 / 10%);

  /* Touch targets: 48px buttons and controls, 44px minimum for any target. POS uses 48. */
  --tdw-tap: 44px;
  --tdw-control-h: 48px;
  --tdw-tap-pos: 48px;

  /* Motion and layers */
  --tdw-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tdw-dur-fast: 120ms;
  --tdw-dur: 200ms;
  --tdw-z-header: 50;
  --tdw-z-book-bar: 45;
  --tdw-z-popup: 60;
  --tdw-z-modal: 1000;

  /* Semantic aliases: dark theme (default) */
  --tdw-bg: var(--tdw-color-black);
  --tdw-surface: var(--tdw-color-rich-black);
  --tdw-surface-2: var(--tdw-color-navy-raised);
  --tdw-fg: var(--tdw-color-text);
  --tdw-fg-muted: var(--tdw-color-muted);
  --tdw-border: var(--tdw-color-line);
  --tdw-border-strong: var(--tdw-veil-55);
  --tdw-accent: var(--tdw-color-gold);
  --tdw-accent-hover: var(--tdw-color-gold-light);
  --tdw-on-accent: var(--tdw-color-black);
  --tdw-link: var(--tdw-color-gold-light);
  --tdw-eyebrow: var(--tdw-color-gold);
  --tdw-focus: var(--tdw-color-accent);
  --tdw-danger: var(--tdw-color-danger);
  --tdw-success: var(--tdw-color-success);
  --tdw-shadow: var(--tdw-shadow-card);
}

@media (min-width: 768px) {
  :root {
    --tdw-gutter: var(--tdw-s-4);
    --tdw-section-y: var(--tdw-s-10);
    --tdw-header-h: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --tdw-section-y: var(--tdw-s-12);
  }
}

/* Light theme: the demo's cream "light section" values. */
[data-tdw-theme="light"] {
  --tdw-bg: var(--tdw-color-cream);
  --tdw-surface: var(--tdw-color-paper);
  --tdw-surface-2: var(--tdw-color-cream);
  --tdw-fg: var(--tdw-color-ink);
  --tdw-fg-muted: var(--tdw-color-ink-muted);
  --tdw-border: var(--tdw-color-line-dark);
  --tdw-border-strong: var(--tdw-color-ink);
  --tdw-accent: var(--tdw-color-ink);
  --tdw-accent-hover: #1b2230;
  --tdw-on-accent: var(--tdw-color-cream);
  --tdw-link: var(--tdw-color-gold-ink);
  --tdw-eyebrow: var(--tdw-color-gold-ink);
  --tdw-focus: var(--tdw-color-ink);
  --tdw-danger: var(--tdw-color-danger-ink);
  --tdw-success: var(--tdw-color-success-ink);
  --tdw-shadow: var(--tdw-shadow-card-light);
}

@media (prefers-reduced-motion: reduce) {
  :root { --tdw-dur-fast: 0ms; --tdw-dur: 0ms; }
}