/* ============================================================
   Enotale v2 — Design Tokens
   Generated from tokens/global.json + tokens/semantic.json + tokens/component.json
   DO NOT edit this file directly — edit the JSON source tokens.
   All components import this file only. Zero hardcoded values in consumers.
   ============================================================ */

/* Google Fonts — Cormorant Garamond (display) + Geologica (UI)
   BG Cyrillic supported by both families. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Geologica:wght@300;400;500;600&display=swap');

/* ============================================================
   BASE RESETS (token-system infrastructure — not component CSS)
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   :ROOT — ALL TOKENS AS CSS CUSTOM PROPERTIES
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     GLOBAL: COLOR PRIMITIVES
     Raw palette values — Curated Library palette.
     Not for direct use in components — use semantic layer.
     ---------------------------------------------------------- */

  --color-parchment: #F7F0E1;
  --color-paper-light: #FBF6EA;
  --color-pure-paper: #FFFFFF;
  --color-paper-fold: #EFE6D2;
  --color-ink: #1F1712;
  --color-walnut: #6B5D4E;
  --color-oak: #8E7F6D;
  --color-paper-edge: #D8CCB0;
  --color-inked-edge: #B8A887;
  --color-wine-burgundy: #6B1F2A;
  --color-deep-lees: #4A1018;
  --color-rose-ink: #9B3D4A;
  --color-antique-gold: #C9A96A;
  --color-tarnished-gold: #A68643;
  --color-moss: #4A6B3C;
  --color-amber-bark: #B8782A;
  --color-blood-oak: #8B2323;
  --color-slate-blue: #4A6482;
  --color-white: #FFFFFF;

  /* Region fills + strokes — BG wine compliance regions (data-viz palette, regional map) */
  --color-region-dunav-fill: #B8E0C4;
  --color-region-trakiya-fill: #E8C4B0;
  --color-region-chernomorie-fill: #B0CEDF;
  --color-region-chernomorie-stroke: #2A5F7E;

  /* ----------------------------------------------------------
     GLOBAL: SPACING SCALE (4px base grid)
     ---------------------------------------------------------- */

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-30: 120px;
  --spacing-32: 128px;

  /* ----------------------------------------------------------
     GLOBAL: RADIUS SCALE
     ---------------------------------------------------------- */

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     GLOBAL: TYPOGRAPHY — FONT FAMILIES
     ---------------------------------------------------------- */

  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-ui: 'Geologica', 'system-ui', sans-serif;

  /* ----------------------------------------------------------
     GLOBAL: TYPOGRAPHY — FONT WEIGHTS
     ---------------------------------------------------------- */

  --font-weight-display-light: 300;
  --font-weight-display-regular: 400;
  --font-weight-display-medium: 500;
  --font-weight-display-bold: 700;
  --font-weight-ui-light: 300;
  --font-weight-ui-regular: 400;
  --font-weight-ui-medium: 500;
  --font-weight-ui-semibold: 600;

  /* ----------------------------------------------------------
     GLOBAL: TYPOGRAPHY — FONT SIZES (fluid clamp)
     H1–H4: Cormorant Garamond display
     body–micro: Geologica UI
     ---------------------------------------------------------- */

  --font-size-h1: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --font-size-h2: clamp(1.75rem, 1rem + 2.25vw, 3rem);
  --font-size-h3: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  --font-size-h4: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-micro: 0.75rem;
  --font-size-compact: 0.8125rem;

  /* Signature PDP sizes */
  --font-size-pdp-wine: 3rem;
  --font-size-pdp-winery: 1.25rem;

  /* ----------------------------------------------------------
     GLOBAL: TYPOGRAPHY — LINE HEIGHTS
     ---------------------------------------------------------- */

  --line-height-display: 1.1;
  --line-height-tight: 1.2;
  --line-height-body: 1.5;
  --line-height-editorial: 1.65;
  --line-height-compact: 1.4;

  /* ----------------------------------------------------------
     GLOBAL: TYPOGRAPHY — LETTER SPACING
     ---------------------------------------------------------- */

  --letter-spacing-normal: 0em;
  --letter-spacing-allcaps: 0.08em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-wide: 0.04em;

  /* ----------------------------------------------------------
     GLOBAL: SHADOWS
     ---------------------------------------------------------- */

  --shadow-card: 0 1px 2px rgba(31, 23, 18, 0.04);
  --shadow-card-border: 0 0 0 1px var(--color-paper-edge);
  --shadow-modal: 0 8px 32px rgba(31, 23, 18, 0.12);
  /* Focus ring: solid 2-layer ring. Passes WCAG SC 1.4.11: Wine Burgundy yields 10.07:1 on Parchment, 9.50:1 on Paper Fold, 11.34:1 on White. */
  --shadow-focus: 0 0 0 2px #F7F0E1, 0 0 0 4px #6B1F2A;
  --shadow-focus-strong: 0 0 0 2px #6B1F2A, 0 0 0 4px #F7F0E1;
  /* Sticky bar: upward-facing shadow. Negative Y offset casts shadow above the element. */
  --shadow-sticky-bar: 0 -4px 16px rgba(31, 23, 18, 0.08);

  /* ----------------------------------------------------------
     GLOBAL: DURATION + EASING
     ---------------------------------------------------------- */

  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-moderate: 350ms;
  --duration-slow: 500ms;

  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-parchment-fold: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ----------------------------------------------------------
     GLOBAL: Z-INDEX SCALE
     ---------------------------------------------------------- */

  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-modal-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ----------------------------------------------------------
     SEMANTIC: SURFACE
     ---------------------------------------------------------- */

  --color-surface-primary: var(--color-parchment);
  --color-surface-alt: var(--color-paper-light);
  --color-surface-raised: var(--color-pure-paper);
  --color-surface-sunk: var(--color-paper-fold);

  /* ----------------------------------------------------------
     SEMANTIC: TEXT
     ---------------------------------------------------------- */

  --color-text-primary: var(--color-ink);
  --color-text-muted: var(--color-walnut);
  --color-text-subtle: var(--color-oak);
  --color-text-on-accent: var(--color-white);
  --color-text-on-surface-sunk: var(--color-ink);
  --color-text-link: var(--color-rose-ink);
  --color-text-link-visited: var(--color-walnut);

  /* ----------------------------------------------------------
     SEMANTIC: BORDER
     ---------------------------------------------------------- */

  --color-border-default: var(--color-paper-edge);
  --color-border-strong: var(--color-inked-edge);
  --color-border-focus: var(--color-inked-edge);

  /* ----------------------------------------------------------
     SEMANTIC: ACCENT
     ---------------------------------------------------------- */

  --color-accent-primary: var(--color-wine-burgundy);
  --color-accent-primary-hover: var(--color-deep-lees);
  --color-accent-primary-text: var(--color-white);
  --color-accent-link: var(--color-rose-ink);
  --color-accent-gold: var(--color-antique-gold);
  --color-accent-gold-hover: var(--color-tarnished-gold);

  /* ----------------------------------------------------------
     SEMANTIC: STATUS
     ---------------------------------------------------------- */

  --color-status-success: var(--color-moss);
  --color-status-warning: var(--color-amber-bark);
  --color-status-error: var(--color-blood-oak);
  --color-status-info: var(--color-slate-blue);

  /* ----------------------------------------------------------
     SEMANTIC: TENANT ACCENT (overridable per winery — Option B)
     Override these on a winery-scoped selector, e.g. [data-tenant="winery-slug"]
     ---------------------------------------------------------- */

  --tenant-accent-default: var(--color-wine-burgundy);
  --tenant-accent-hover: var(--color-deep-lees);

  /* ----------------------------------------------------------
     SEMANTIC: REGION COLORS (BG wine compliance map — M2 fix)
     ---------------------------------------------------------- */

  /* Danubian region — stroke references existing global moss primitive */
  --color-region-dunav-stroke: var(--color-moss);

  /* Thracian region — stroke references existing global wine-burgundy primitive */
  --color-region-trakiya-stroke: var(--color-wine-burgundy);

  /* Black Sea region — fill and stroke reference new global primitives declared above */
  /* --color-region-dunav-fill, --color-region-trakiya-fill, --color-region-chernomorie-fill,
     --color-region-chernomorie-stroke already declared in global primitives block above */

  /* ----------------------------------------------------------
     SEMANTIC: BADGE + PILL COLORS (M4 fix — removes global-layer bypass)
     Wine badge variants: rose, orange, sparkling, natural
     Status pill variants: confirmed, preparing, shipped, transit, delivered,
                           published, pending, review, rejected, draft
     M1 fix: amber-bark variants use Ink fg (5.25:1) not White (3.61:1 FAIL)
     ---------------------------------------------------------- */

  /* Wine type badges */
  --color-badge-wine-rose-bg: var(--color-rose-ink);
  --color-badge-wine-rose-fg: var(--color-white);
  --color-badge-wine-orange-bg: var(--color-amber-bark);
  --color-badge-wine-orange-fg: var(--color-ink);       /* Ink on Amber Bark 5.25:1 — AA pass */
  --color-badge-wine-sparkling-bg: var(--color-slate-blue);
  --color-badge-wine-sparkling-fg: var(--color-white);
  --color-badge-wine-natural-bg: var(--color-moss);
  --color-badge-wine-natural-fg: var(--color-white);

  /* Status pills */
  --color-status-pill-confirmed-bg: var(--color-paper-fold);
  --color-status-pill-confirmed-fg: var(--color-walnut);
  --color-status-pill-preparing-bg: var(--color-slate-blue);
  --color-status-pill-preparing-fg: var(--color-white);
  --color-status-pill-shipped-bg: var(--color-amber-bark);
  --color-status-pill-shipped-fg: var(--color-ink);     /* M1 fix: Ink 5.25:1, was White 3.61:1 FAIL */
  --color-status-pill-transit-bg: var(--color-amber-bark);
  --color-status-pill-transit-fg: var(--color-ink);     /* M1 fix: Ink 5.25:1, was White 3.61:1 FAIL */
  --color-status-pill-delivered-bg: var(--color-moss);
  --color-status-pill-delivered-fg: var(--color-white);
  --color-status-pill-published-bg: var(--color-moss);
  --color-status-pill-published-fg: var(--color-white);
  --color-status-pill-pending-bg: var(--color-slate-blue);
  --color-status-pill-pending-fg: var(--color-white);
  --color-status-pill-review-bg: var(--color-amber-bark);
  --color-status-pill-review-fg: var(--color-ink);      /* M1 fix: Ink 5.25:1, was White 3.61:1 FAIL */
  --color-status-pill-rejected-bg: var(--color-status-error);
  --color-status-pill-rejected-fg: var(--color-white);
  --color-status-pill-draft-bg: var(--color-paper-fold);
  --color-status-pill-draft-fg: var(--color-walnut);

  /* ----------------------------------------------------------
     SEMANTIC: SPACING ALIASES
     ---------------------------------------------------------- */

  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-sm-plus: var(--spacing-3);
  --spacing-md: var(--spacing-4);
  --spacing-md-plus: var(--spacing-5);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);
  --spacing-2xl: var(--spacing-10);
  --spacing-2xl-plus: var(--spacing-12);
  --spacing-3xl: var(--spacing-14);
  --spacing-editorial-sm: var(--spacing-16);
  --spacing-editorial-md: var(--spacing-20);
  --spacing-editorial-lg: var(--spacing-24);
  --spacing-editorial-xl: var(--spacing-30);
  --spacing-section-hero: var(--spacing-32);

  /* ----------------------------------------------------------
     SEMANTIC: RADIUS ALIASES
     ---------------------------------------------------------- */

  --radius-button: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --radius-card: var(--radius-md);
  --radius-modal: var(--radius-lg);
  --radius-badge: var(--radius-xs);
  --radius-avatar: var(--radius-full);

  /* ----------------------------------------------------------
     SEMANTIC: SHADOW ALIASES
     ---------------------------------------------------------- */

  --shadow-card-semantic: var(--shadow-card);
  --shadow-floating: var(--shadow-modal);
  --shadow-focus-ring: var(--shadow-focus);           /* 10.07:1 on Parchment — WCAG SC 1.4.11 pass */
  --shadow-focus-ring-strong: var(--shadow-focus-strong);
  --shadow-sticky-bar-semantic: var(--shadow-sticky-bar);

  /* ----------------------------------------------------------
     SEMANTIC: MOTION ALIASES
     ---------------------------------------------------------- */

  --motion-duration-fast: var(--duration-fast);
  --motion-duration-base: var(--duration-base);
  --motion-duration-enter: var(--duration-moderate);
  --motion-duration-page: var(--duration-slow);
  --motion-easing-standard: var(--easing-standard);
  --motion-easing-enter: var(--easing-decelerate);
  --motion-easing-exit: var(--easing-accelerate);
  --motion-easing-fold: var(--easing-parchment-fold);

  /* ----------------------------------------------------------
     COMPONENT: BUTTON
     ---------------------------------------------------------- */

  --button-radius: var(--radius-button);
  --button-min-height: 44px;
  --button-min-width: 44px;
  --button-padding-x: var(--spacing-md-plus);
  --button-padding-y: var(--spacing-sm-plus);
  --button-font-size: var(--font-size-small);
  --button-font-family: var(--font-ui);
  --button-font-weight: var(--font-weight-ui-medium);
  --button-letter-spacing: var(--letter-spacing-normal);
  --button-transition-duration: var(--motion-duration-fast);
  --button-transition-easing: var(--motion-easing-standard);

  /* Primary button */
  --button-primary-bg: var(--color-accent-primary);
  --button-primary-bg-hover: var(--color-accent-primary-hover);
  --button-primary-bg-active: var(--color-accent-primary-hover);
  --button-primary-bg-disabled: var(--color-border-default);
  --button-primary-text: var(--color-accent-primary-text);
  --button-primary-text-disabled: var(--color-text-muted);
  --button-primary-border: transparent;
  --button-primary-focus-ring: var(--shadow-focus-ring-strong);

  /* Secondary button */
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: var(--color-surface-sunk);
  --button-secondary-bg-disabled: transparent;
  --button-secondary-text: var(--color-accent-primary);
  --button-secondary-text-hover: var(--color-accent-primary-hover);
  --button-secondary-text-disabled: var(--color-text-subtle);
  --button-secondary-border: var(--color-accent-primary);
  --button-secondary-border-hover: var(--color-accent-primary-hover);
  --button-secondary-border-disabled: var(--color-border-default);
  --button-secondary-focus-ring: var(--shadow-focus-ring-strong);

  /* Ghost button */
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: var(--color-surface-sunk);
  --button-ghost-text: var(--color-text-primary);
  --button-ghost-text-hover: var(--color-accent-primary);
  --button-ghost-text-disabled: var(--color-text-subtle);
  --button-ghost-border: transparent;
  --button-ghost-focus-ring: var(--shadow-focus-ring);

  /* Small button (all-caps variant) */
  --button-small-padding-x: var(--spacing-md);
  --button-small-padding-y: var(--spacing-sm);
  --button-small-font-size: var(--font-size-micro);
  --button-small-letter-spacing: var(--letter-spacing-allcaps);
  --button-small-font-weight: var(--font-weight-ui-semibold);

  /* ----------------------------------------------------------
     COMPONENT: INPUT
     ---------------------------------------------------------- */

  --input-radius: var(--radius-input);
  --input-min-height: 44px;
  --input-padding-x: var(--spacing-md);
  --input-padding-y: var(--spacing-sm-plus);
  --input-font-size: var(--font-size-body);
  --input-font-family: var(--font-ui);
  --input-bg: var(--color-surface-raised);
  --input-bg-disabled: var(--color-surface-sunk);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-subtle);
  --input-border: var(--color-border-default);
  --input-border-hover: var(--color-border-strong);
  --input-border-focus: var(--color-border-focus);
  --input-border-error: var(--color-status-error);
  --input-focus-ring: var(--shadow-focus-ring);
  --input-label-font-size: var(--font-size-small);
  --input-label-font-weight: var(--font-weight-ui-medium);
  --input-label-color: var(--color-text-primary);
  --input-hint-color: var(--color-text-muted);
  --input-error-color: var(--color-status-error);

  /* ----------------------------------------------------------
     COMPONENT: CARD (shared)
     ---------------------------------------------------------- */

  --card-radius: var(--radius-card);

  /* Product card */
  --card-product-bg: var(--color-surface-alt);
  --card-product-border-color: var(--color-border-default);
  --card-product-shadow: var(--shadow-card);
  --card-product-padding: var(--spacing-lg);
  --card-product-wine-name-font: var(--font-display);
  --card-product-wine-name-size: var(--font-size-h4);
  --card-product-wine-name-weight: var(--font-weight-display-medium);
  --card-product-winery-font: var(--font-display);
  --card-product-winery-weight: var(--font-weight-display-light);
  --card-product-meta-font: var(--font-ui);
  --card-product-meta-size: var(--font-size-compact);
  --card-product-meta-color: var(--color-text-muted);
  --card-product-price-color: var(--color-text-primary);
  --card-product-fold-bg: var(--color-surface-alt);
  --card-product-fold-duration: var(--motion-duration-base);
  --card-product-fold-easing: var(--motion-easing-fold);
  --card-product-author-portrait-size: 64px;
  --card-product-author-ring-color: var(--color-accent-gold);

  /* Winery card */
  --card-winery-bg: var(--color-surface-alt);
  --card-winery-border-color: var(--color-border-default);
  --card-winery-shadow: var(--shadow-card);
  --card-winery-padding: var(--spacing-lg);
  --card-winery-header-font: var(--font-display);
  --card-winery-header-size: var(--font-size-h3);
  --card-winery-portrait-size: 64px;
  --card-winery-verified-ring: var(--color-accent-gold);

  /* Author card */
  --card-author-bg: var(--color-surface-primary);
  --card-author-portrait-sm: 64px;
  --card-author-portrait-md: 96px;
  --card-author-portrait-lg: 128px;
  --card-author-ring-default: var(--color-border-default);
  --card-author-ring-premium: var(--color-accent-gold);

  /* ----------------------------------------------------------
     COMPONENT: MODAL
     ---------------------------------------------------------- */

  --modal-radius: var(--radius-modal);
  --modal-bg: var(--color-surface-raised);
  --modal-shadow: var(--shadow-floating);
  --modal-overlay-bg: rgba(31, 23, 18, 0.5);
  --modal-padding: var(--spacing-xl);
  --modal-header-padding: var(--spacing-lg);
  --modal-max-width-sm: 400px;
  --modal-max-width-md: 560px;
  --modal-max-width-lg: 760px;
  --modal-enter-duration: var(--motion-duration-enter);

  /* ----------------------------------------------------------
     COMPONENT: BADGE
     ---------------------------------------------------------- */

  --badge-radius: var(--radius-badge);
  --badge-padding-x: var(--spacing-sm);
  --badge-padding-y: var(--spacing-xs);
  --badge-font-size: var(--font-size-micro);
  --badge-font-weight: var(--font-weight-ui-semibold);
  --badge-letter-spacing: var(--letter-spacing-allcaps);

  --badge-wine-red-bg: var(--color-accent-primary);
  --badge-wine-red-text: var(--color-accent-primary-text);
  --badge-wine-white-bg: var(--color-surface-sunk);
  --badge-wine-white-text: var(--color-text-primary);
  --badge-wine-white-border: var(--color-border-default);
  --badge-premium-bg: var(--color-accent-gold);
  --badge-premium-text: var(--color-text-primary);
  --badge-verified-border: var(--color-accent-gold);
  --badge-verified-text: var(--color-accent-gold);

  /* ----------------------------------------------------------
     COMPONENT: NAVIGATION
     ---------------------------------------------------------- */

  --nav-bg: var(--color-surface-primary);
  --nav-border-bottom: var(--color-border-default);
  --nav-height: 64px;
  --nav-height-mobile: 56px;
  --nav-link-color: var(--color-text-primary);
  --nav-link-hover: var(--color-accent-primary);
  --nav-link-active: var(--color-accent-primary);
  --nav-link-font-size: var(--font-size-small);
  --nav-link-font-weight: var(--font-weight-ui-semibold);
  --nav-link-letter-spacing: var(--letter-spacing-allcaps);
  --nav-padding-x: var(--spacing-lg);

  /* ----------------------------------------------------------
     COMPONENT: TABLE (dense data — R1 mitigation)
     ---------------------------------------------------------- */

  --table-container-bg: var(--color-surface-sunk);
  --table-row-bg: var(--color-surface-raised);
  --table-row-alt-bg: var(--color-surface-alt);
  --table-header-bg: var(--color-surface-sunk);
  --table-header-text: var(--color-text-primary);
  --table-header-font-weight: var(--font-weight-ui-semibold);
  --table-cell-text: var(--color-text-primary);
  --table-cell-text-secondary: var(--color-text-muted);
  --table-border: var(--color-border-strong);
  --table-padding-compact-x: var(--spacing-md);
  --table-padding-compact-y: var(--spacing-sm);
  --table-font-size-compact: var(--font-size-compact);
  --table-line-height-compact: var(--line-height-compact);
  --table-font-family: var(--font-ui);

  /* ----------------------------------------------------------
     COMPONENT: BOOKMARK RIBBON (R4: gold discipline)
     ---------------------------------------------------------- */

  --bookmark-ribbon-color: var(--color-accent-gold);
  --bookmark-ribbon-size: 24px;

  /* ----------------------------------------------------------
     COMPONENT: VINTAGE RULE DIVIDER (R4: gold discipline)
     ---------------------------------------------------------- */

  --divider-vintage-color: var(--color-accent-gold);
  --divider-vintage-weight: 1px;
  --divider-vintage-margin-y: var(--spacing-editorial-sm);

  /* ----------------------------------------------------------
     COMPONENT: TOAST
     ---------------------------------------------------------- */

  --toast-radius: var(--radius-modal);
  --toast-padding: var(--spacing-md);
  --toast-shadow: var(--shadow-floating);
  --toast-success-bg: var(--color-status-success);
  --toast-success-text: var(--color-accent-primary-text);
  --toast-error-bg: var(--color-status-error);
  --toast-error-text: var(--color-accent-primary-text);
  --toast-warning-bg: var(--color-status-warning);
  --toast-warning-text: var(--color-text-primary);  /* Ink — White on Amber Bark fails AA, Ink passes at 5.6:1 */
  --toast-info-bg: var(--color-status-info);
  --toast-info-text: var(--color-accent-primary-text);

  /* ----------------------------------------------------------
     COMPONENT: STICKY BAR (C5 fix)
     ---------------------------------------------------------- */

  --sticky-bar-shadow: var(--shadow-sticky-bar-semantic);

  /* ----------------------------------------------------------
     BREAKPOINTS (reference only — use in media queries directly)
     --breakpoint-mobile: 0px
     --breakpoint-tablet: 641px
     --breakpoint-desktop: 1025px
     --breakpoint-wide: 1441px
     NOTE: CSS custom properties cannot be used in @media queries.
     These are documented for reference. Use the pixel values directly.
     ---------------------------------------------------------- */
}

/* ============================================================
   DARK MODE — semantic token overrides
   Components reference semantic tokens — dark mode swaps the
   semantic values without touching component CSS.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces — warm dark, not pure black */
    --color-surface-primary: #1A1410;
    --color-surface-alt: #221D17;
    --color-surface-raised: #2A2319;
    --color-surface-sunk: #15110E;

    /* Text — reduced contrast white */
    --color-text-primary: #EDE4D4;
    --color-text-muted: #A89880;
    --color-text-subtle: #7A6E62;
    --color-text-on-accent: #FFFFFF;
    --color-text-on-surface-sunk: #EDE4D4;
    --color-text-link: #C4706C;
    --color-text-link-visited: #A89880;

    /* Borders */
    --color-border-default: #3D3227;
    --color-border-strong: #5C4E3E;
    --color-border-focus: #5C4E3E;

    /* Accent — lightened slightly for dark surface contrast */
    --color-accent-primary: #8B2D3D;
    --color-accent-primary-hover: #A83548;
    --color-accent-primary-text: #FFFFFF;
    --color-accent-link: #C4706C;
    --color-accent-gold: #C9A96A;
    --color-accent-gold-hover: #D4BC82;

    /* Shadows — darker, more transparent */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.4);
    /* Dark focus ring: 2px dark surface gap + 4px lightened accent outer. Two-layer solid for contrast. */
    --shadow-focus: 0 0 0 2px #1A1410, 0 0 0 4px #8B2D3D;
    --shadow-focus-strong: 0 0 0 2px #8B2D3D, 0 0 0 4px #1A1410;

    /* Shadows — semantic aliases (must re-declare after primitive override) */
    --shadow-card-semantic: var(--shadow-card);
    --shadow-floating: var(--shadow-modal);
    --shadow-focus-ring: var(--shadow-focus);
    --shadow-focus-ring-strong: var(--shadow-focus-strong);

    /* Modal overlay */
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
  }
}

/* Explicit data-theme attribute — allows JS toggle independent of OS preference */
[data-theme="dark"] {
  --color-surface-primary: #1A1410;
  --color-surface-alt: #221D17;
  --color-surface-raised: #2A2319;
  --color-surface-sunk: #15110E;
  --color-text-primary: #EDE4D4;
  --color-text-muted: #A89880;
  --color-text-subtle: #7A6E62;
  --color-text-on-accent: #FFFFFF;
  --color-text-on-surface-sunk: #EDE4D4;
  --color-text-link: #C4706C;
  --color-text-link-visited: #A89880;
  --color-border-default: #3D3227;
  --color-border-strong: #5C4E3E;
  --color-border-focus: #5C4E3E;
  --color-accent-primary: #8B2D3D;
  --color-accent-primary-hover: #A83548;
  --color-accent-primary-text: #FFFFFF;
  --color-accent-link: #C4706C;
  --color-accent-gold: #C9A96A;
  --color-accent-gold-hover: #D4BC82;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 2px #1A1410, 0 0 0 4px #8B2D3D;
  --shadow-focus-strong: 0 0 0 2px #8B2D3D, 0 0 0 4px #1A1410;
  --shadow-card-semantic: var(--shadow-card);
  --shadow-floating: var(--shadow-modal);
  --shadow-focus-ring: var(--shadow-focus);
  --shadow-focus-ring-strong: var(--shadow-focus-strong);
  --modal-overlay-bg: rgba(0, 0, 0, 0.7);
}

[data-theme="light"] {
  /* Explicitly reset to light — overrides prefers-color-scheme: dark */
  --color-surface-primary: var(--color-parchment);
  --color-surface-alt: var(--color-paper-light);
  --color-surface-raised: var(--color-pure-paper);
  --color-surface-sunk: var(--color-paper-fold);
  --color-text-primary: var(--color-ink);
  --color-text-muted: var(--color-walnut);
  --color-text-subtle: var(--color-oak);
  --color-text-on-accent: var(--color-white);
  --color-text-link: var(--color-rose-ink);
  --color-border-default: var(--color-paper-edge);
  --color-border-strong: var(--color-inked-edge);
  --color-border-focus: var(--color-inked-edge);
  --color-accent-primary: var(--color-wine-burgundy);
  --color-accent-primary-hover: var(--color-deep-lees);
  --color-accent-gold: var(--color-antique-gold);
  --color-accent-gold-hover: var(--color-tarnished-gold);
  --shadow-card: 0 1px 2px rgba(31, 23, 18, 0.04);
  --shadow-modal: 0 8px 32px rgba(31, 23, 18, 0.12);
  --shadow-focus: 0 0 0 2px #F7F0E1, 0 0 0 4px #6B1F2A;
  --shadow-focus-strong: 0 0 0 2px #6B1F2A, 0 0 0 4px #F7F0E1;
  --shadow-card-semantic: var(--shadow-card);
  --shadow-floating: var(--shadow-modal);
  --shadow-focus-ring: var(--shadow-focus);
  --shadow-focus-ring-strong: var(--shadow-focus-strong);
  --modal-overlay-bg: rgba(31, 23, 18, 0.5);
}

/* ============================================================
   REDUCED MOTION — wrap all transitions/animations in components
   via this query. Component CSS must check this.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-moderate: 0ms;
    --duration-slow: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-enter: 0ms;
    --motion-duration-page: 0ms;
    --card-product-fold-duration: 0ms;
    --button-transition-duration: 0ms;
    --modal-enter-duration: 0ms;
  }
}