/* =========================================================
   COLORES — Design Tokens
   Single source of truth for colors, type, spacing, motion.
   ========================================================= */

/* Dark theme — default per brand book (70/25/5 onyx/cream/copper) */
:root, :root[data-theme="dark"] {
  /* Surfaces */
  --bg:           #0a0807;  /* Onyx — foundation */
  --bg-2:         #13100e;  /* Ember — card/panel */
  --bg-3:         #1c1815;  /* Cocoa — hover/elevated */
  --line:         #2a2320;
  --line-bright:  #3a302b;

  /* Text */
  --text:         #f1ebe2;  /* Cream — never pure white */
  --text-muted:   #9a8d7f;  /* Mist */

  /* Accent */
  --accent:       #c89368;  /* Copper */
  --accent-hover: #dca77a;  /* Champagne */
  --accent-deep:  #8a5e3f;  /* Bronze */
  --sand:         #f4cfa4;
  --gold-grad:    linear-gradient(135deg, #f4cfa4 0%, #c89368 35%, #8a5e3f 70%, #dca77a 100%);

  /* Selection */
  --selection-bg: var(--accent);
  --selection-fg: var(--bg);
}

/* Light theme — Onyx on Cream with Bronze accent (brand book page 06) */
:root[data-theme="light"] {
  --bg:           #f1ebe2;
  --bg-2:         #e9dfd0;
  --bg-3:         #ddd0bd;
  --line:         #dccab2;
  --line-bright:  #c4b59c;
  --text:         #0a0807;
  --text-muted:   #5b4a3d;
  --accent:       #8a5e3f;
  --accent-hover: #c89368;
  --accent-deep:  #6a4530;
  --sand:         #c89368;
  --gold-grad:    linear-gradient(135deg, #8a5e3f 0%, #c89368 50%, #6a4530 100%);
  --selection-bg: var(--accent);
  --selection-fg: var(--bg);
}

/* Honor OS preference on first paint when no user choice stored */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Light vars duplicated here so first paint is correct.
       The theme.js inline pre-script sets data-theme before CSS loads,
       making this fallback unnecessary in practice but defense-in-depth. */
    --bg: #f1ebe2; --bg-2: #e9dfd0; --bg-3: #ddd0bd;
    --line: #dccab2; --line-bright: #c4b59c;
    --text: #0a0807; --text-muted: #5b4a3d;
    --accent: #8a5e3f; --accent-hover: #c89368; --accent-deep: #6a4530;
  }
}

/* Typography */
:root {
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fz-mono-xs: .65rem;
  --fz-mono-sm: .72rem;
  --fz-body:    1rem;
  --fz-body-lg: 1.125rem;
  --fz-h6:      1rem;
  --fz-h5:      1.15rem;
  --fz-h4:      1.4rem;
  --fz-h3:      clamp(1.4rem, 2vw, 1.9rem);
  --fz-h2:      clamp(2rem, 4vw, 3.4rem);
  --fz-h1:      clamp(3rem, 7vw, 6rem);

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.65;
  --lh-caption: 1.55;

  --ls-display: -.015em;
  --ls-heading: -.01em;
  --ls-eyebrow: .32em;
}

/* Layout */
:root {
  --maxw:     1280px;
  --gutter:   clamp(1.5rem, 4vw, 3rem);
  --space-1:  .5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  3rem;
  --space-6:  4rem;
  --space-7:  6rem;
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 12px;
}

/* Motion */
:root {
  --t-fast:   .15s ease;
  --t-base:   .25s ease;
  --t-slow:   .45s cubic-bezier(.2,.8,.2,1);
  --t-theme:  .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-base: 0s; --t-slow: 0s; --t-theme: 0s; }
}

/* Z-index scale */
:root {
  --z-nav: 100;
  --z-mobile-menu: 200;
  --z-sticky-cta: 150;
  --z-modal: 300;
}