/* ==========================================================================
   NobleNeedle — Design tokens
   Canon: docs/redesign-spec/05-theme-system.md
   Three tiers: primitives → semantic roles → component tokens.
     :root                          = Theme A «Argent» (dark-silver, default)
     html[data-theme="light-gold"]  = Theme B «Aurum»  (light-gold, canonical)
   Legacy names (--gold, --bg, --cream, …) are aliased at the bottom so every
   existing selector keeps working; new code must use --nn-* roles only.
   ========================================================================== */

:root {
  /* ---------- Tier 1 · primitive palette (never used in selectors) ---------- */
  --nn-gold-200: #f0d98f; --nn-gold-250: #d8b95c; --nn-gold-300: #d4b55a;
  --nn-gold-350: #c0993c; --nn-gold-400: #c9a84c; --nn-gold-500: #a8842f;
  --nn-gold-600: #8a6c24; --nn-gold-700: #7c611f; --nn-gold-800: #7c5c1c;
  --nn-silver-100: #f0ede4; --nn-silver-200: #e8e4da; --nn-silver-400: #c9c4b8;
  --nn-silver-600: #8f897c; --nn-silver-700: #6e6a5f;
  --nn-umber-950: #0a0908; --nn-umber-900: #100f0d; --nn-umber-850: #161412;
  --nn-umber-800: #1c1a17; --nn-umber-750: #232019; --nn-umber-700: #2b2823;
  --nn-umber-600: #3f3a32;
  --nn-ivory-50: #fbf7ee; --nn-ivory-100: #f4efe6; --nn-ivory-150: #efe9db;
  --nn-ivory-200: #ede5d5; --nn-ivory-250: #ece4d2; --nn-ivory-300: #e6dcc7;
  --nn-ivory-400: #ddd2ba; --nn-ivory-500: #cdbf9f;
  --nn-amber-500: #d8a03c; --nn-amber-700: #8a6420;

  /* ---------- Tier 2 · semantic roles — Theme A: Argent (dark-silver) ---------- */
  --nn-surface-0: var(--nn-umber-950);
  --nn-surface-1: var(--nn-umber-900);
  --nn-surface-2: var(--nn-umber-850);
  --nn-surface-3: var(--nn-umber-800);
  --nn-surface-4: var(--nn-umber-750);
  --nn-ink-1: #ece7dc;
  --nn-ink-2: #b5ada0;
  --nn-ink-3: #8f877a;
  --nn-ink-4: #6e675c;
  --nn-ink-5: #4d473e;
  --nn-accent: var(--nn-silver-400);
  --nn-accent-bright: var(--nn-silver-200);
  --nn-accent-strong: var(--nn-silver-600);
  --nn-accent-ink: var(--nn-silver-400);      /* dark: same as accent (contrast is ample) */
  --nn-on-accent: #17140f;
  --nn-accent-grad: linear-gradient(135deg, var(--nn-silver-100) 0%, var(--nn-silver-400) 45%, var(--nn-silver-600) 100%);
  --nn-accent-sheen: linear-gradient(120deg, rgba(201,196,184,0) 0%, rgba(240,237,228,.5) 50%, rgba(201,196,184,0) 100%);
  --nn-line-1: var(--nn-umber-700);
  --nn-line-2: var(--nn-umber-600);
  --nn-field-border: var(--nn-umber-600);
  --nn-focus-ring: #d8d3c8;
  --nn-state-danger: #c46a48;
  --nn-state-success: #85a465;
  --nn-state-warning: var(--nn-amber-500);
  --nn-selection-bg: color-mix(in srgb, var(--nn-accent) 28%, transparent);
  --nn-backdrop: rgba(6,5,4,.62);
  --nn-glass-bg: rgba(14,13,11,.78);
  --nn-shadow-1: 0 24px 60px -20px rgba(0,0,0,.7);
  --nn-shadow-accent: 0 14px 40px -12px rgba(201,196,184,.26);
  --nn-canvas-bg: #131110;
  --nn-canvas-glow: radial-gradient(60% 50% at 50% 40%, rgba(201,196,184,.08), transparent 70%);
  /* hero scrims — identical in BOTH themes (hero video stays dark) */
  --nn-hero-scrim-1: linear-gradient(105deg, rgba(8,7,6,.82) 0%, rgba(8,7,6,.5) 34%, rgba(8,7,6,.12) 64%, rgba(8,7,6,0) 100%);
  --nn-hero-scrim-2: linear-gradient(180deg, rgba(8,7,6,.6) 0%, rgba(8,7,6,.18) 30%, rgba(8,7,6,.42) 62%, rgba(8,7,6,.92) 100%);
  --nn-card-media-bg: var(--nn-surface-2);
  --nn-card-overlay-soft: rgba(8,7,6,.55);
  --nn-card-overlay: rgba(8,7,6,.7);
  --nn-card-overlay-strong: rgba(8,7,6,.78);
  --nn-grain-alpha: .05;
  /* hero is deliberately dark in BOTH themes (cinematic video) */
  --nn-hero-ink: #f4ecdc;
  --nn-hero-ink-2: #dccfb8;
  --nn-hero-ink-3: #d8ccb6;
  /* 3D viewer */
  --nn-accent-3d: #c9c4b8;                    /* rim light / metallic thread */
  --nn-zone-stroke: var(--nn-accent);         /* read by JS for canvas textures */
  --nn-viewer-ambient: 0.30;

  /* Alpha scale of the metal (replaces hardcoded rgba(201,168,76,α)) */
  --nn-accent-a05: color-mix(in srgb, var(--nn-accent) 5%, transparent);
  --nn-accent-a08: color-mix(in srgb, var(--nn-accent) 8%, transparent);
  --nn-accent-a12: color-mix(in srgb, var(--nn-accent) 12%, transparent);
  --nn-accent-a16: color-mix(in srgb, var(--nn-accent) 16%, transparent);
  --nn-accent-a22: color-mix(in srgb, var(--nn-accent) 22%, transparent);
  --nn-accent-a30: color-mix(in srgb, var(--nn-accent) 30%, transparent);
  --nn-accent-a55: color-mix(in srgb, var(--nn-accent) 55%, transparent);

  /* ---------- Non-color tokens (not themed; moved from styles.css) ---------- */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t: .32s;
  --z-grain: 1;
  --z-header: 60;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;
}

/* ---------- Tier 2 · Theme B: Aurum (light-gold) ---------- */
html[data-theme="light-gold"] {
  --nn-surface-0: var(--nn-ivory-100);
  --nn-surface-1: var(--nn-ivory-200);
  --nn-surface-2: var(--nn-ivory-300);
  --nn-surface-3: var(--nn-ivory-50);        /* cards LIGHTER than the page */
  --nn-surface-4: var(--nn-ivory-150);
  --nn-ink-1: #291f13;
  --nn-ink-2: #4c3f2a;
  --nn-ink-3: #6d5c40;
  --nn-ink-4: #8b7857;
  --nn-ink-5: #a8946e;
  --nn-accent: var(--nn-gold-500);
  --nn-accent-bright: var(--nn-gold-350);
  --nn-accent-strong: var(--nn-gold-600);
  --nn-accent-ink: var(--nn-gold-700);        /* small gold text: 5.11:1 on surface-0 */
  --nn-on-accent: #1c1408;
  --nn-accent-grad: linear-gradient(135deg, var(--nn-gold-250) 0%, var(--nn-gold-500) 45%, var(--nn-gold-800) 100%);
  --nn-accent-sheen: linear-gradient(120deg, rgba(168,132,47,0) 0%, rgba(255,250,238,.6) 50%, rgba(168,132,47,0) 100%);
  --nn-line-1: var(--nn-ivory-400);
  --nn-line-2: var(--nn-ivory-500);
  --nn-field-border: #b3a284;
  --nn-focus-ring: var(--nn-gold-600);
  --nn-state-danger: #a3492b;
  --nn-state-success: #55743a;
  --nn-state-warning: var(--nn-amber-700);
  --nn-selection-bg: color-mix(in srgb, var(--nn-accent) 26%, transparent);
  --nn-backdrop: rgba(38,30,18,.45);
  --nn-glass-bg: rgba(249,245,237,.85);
  --nn-shadow-1: 0 18px 44px -18px rgba(58,44,24,.28);
  --nn-shadow-accent: 0 12px 32px -12px rgba(168,132,47,.30);
  --nn-canvas-bg: var(--nn-ivory-250);
  --nn-canvas-glow: radial-gradient(60% 50% at 50% 40%, rgba(168,132,47,.10), transparent 70%);
  --nn-card-media-bg: linear-gradient(160deg, #efe7d8, #e3d8c5);
  --nn-card-overlay-soft: rgba(249,245,237,.72);
  --nn-card-overlay: rgba(249,245,237,.85);
  --nn-card-overlay-strong: rgba(249,245,237,.9);
  --nn-grain-alpha: .02;
  --nn-accent-3d: #c9a84c;                    /* 3D uses the bright metal, not the UI accent */
  --nn-zone-stroke: var(--nn-accent-strong);  /* light: #8a6c24 — canon 05 §8 */
  --nn-viewer-ambient: 0.42;
}

/* ---------- Native controls follow the theme ---------- */
:root { color-scheme: dark; }
html[data-theme="light-gold"] { color-scheme: light; }
html { scrollbar-color: var(--nn-line-2) var(--nn-surface-1); }

/* Chrome autofill would otherwise paint fields white/yellow in both themes */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--nn-surface-3) inset;
  -webkit-text-fill-color: var(--nn-ink-1);
  caret-color: var(--nn-ink-1);
}

/* Print (order receipts): force the light roles regardless of theme */
@media print {
  html, html[data-theme] {
    --nn-surface-0: #fff; --nn-surface-1: #fff; --nn-surface-2: #f6f2ea;
    --nn-surface-3: #fff; --nn-surface-4: #f6f2ea;
    --nn-ink-1: #191510; --nn-ink-2: #3a3226; --nn-ink-3: #5c5140;
    --nn-accent: #8a6c24; --nn-accent-ink: #7c611f; --nn-on-accent: #fff;
    --nn-line-1: #ddd6c8; --nn-line-2: #c9c0ac;
    --nn-shadow-1: none; --nn-shadow-accent: none; --nn-grain-alpha: 0;
  }
}

/* ---------- Legacy aliases (transition bridge; do not use in new code) ---------- */
:root {
  --bg:        var(--nn-surface-0);
  --bg-1:      var(--nn-surface-1);
  --bg-2:      var(--nn-surface-2);
  --surface:   var(--nn-surface-3);
  --surface-2: var(--nn-surface-4);
  --line:      var(--nn-line-1);
  --line-2:    var(--nn-line-2);
  --gold:      var(--nn-accent);
  --gold-2:    var(--nn-accent-bright);
  --gold-deep: var(--nn-accent-strong);
  --cream:     var(--nn-ink-1);
  --text:      var(--nn-ink-1);
  --text-2:    var(--nn-ink-2);
  --text-3:    var(--nn-ink-3);
  --text-4:    var(--nn-ink-4);
  --text-5:    var(--nn-ink-5);
  --danger:    var(--nn-state-danger);
  --success:   var(--nn-state-success);
  --gold-grad: var(--nn-accent-grad);
  --shadow:      var(--nn-shadow-1);
  --shadow-gold: var(--nn-shadow-accent);
}