/* ============================================================================
   Lukes & Lukes — Design Tokens (lukesappraisals.com)
   "The Movement" refined-luxury system. German precision + clockmaker heritage,
   rendered as an establishment professional-services firm: a gallery-grade canvas
   of warm alabaster and obsidian charcoal, antique gold used as *chrome*
   (fine metallic hairlines and registration detail), and oxblood reserved as a
   single quiet accent — never a loud button.

   IMPLEMENTATION NOTE: the raw hue variable NAMES (--navy-*, --brass-*, --bone-*,
   --signal-*) are carried over from the shared component CSS so the build works
   with zero edits. Their VALUES are the Lukes & Lukes palette:
     --navy-*   = charcoal / obsidian (dark base)
     --brass-*  = champagne / antique gold (heritage "chrome" accent)
     --bone-*   = warm alabaster (gallery canvas)
     --signal-* = oxblood (serious accent — used as a tick/hairline, sparingly)
   Prefer the SEMANTIC roles (--bg, --text, --accent, --cta, …) in new components.
   See docs/strategy/brand-identity.md.
   ========================================================================== */

:root {
  /* ---- Charcoal / obsidian (dark base) — mapped onto --navy-* ---- */
  --navy-900: #0C0E12;   /* deepest — obsidian dial */
  --navy-800: #14171D;   /* PRIMARY dark (charcoal) */
  --navy-700: #1C2027;
  --navy-600: #272C35;
  --navy-500: #3A414C;

  /* ---- Champagne / antique gold (heritage "chrome" accent) — --brass-* ---- */
  --brass-700: #6E561F;
  --brass-600: #8A6C2E;
  --brass-500: #A3823B;   /* PRIMARY accent (antique gold) */
  --brass-400: #C2A763;   /* accent on dark */
  --brass-300: #DCC692;
  --brass-200: #ECE0C2;
  --brass-100: #F1E8D2;   /* faint gold tint for hairlines on light */

  /* ---- Warm alabaster (gallery canvas) — mapped onto --bone-* ---- */
  --bone-50:  #FCFBF6;   /* raised / pure card surface */
  --bone-100: #F7F3EA;   /* PRIMARY canvas (watch-dial cream) */
  --bone-200: #EDE7D8;
  --bone-300: #DBD3C0;

  /* ---- Ink (text) ---- */
  --ink-900:  #15171C;    /* body text on light */
  --ink-700:  #333842;
  --ink-500:  #616874;    /* muted text */
  --ink-300:  #949AA5;

  /* ---- Oxblood (serious accent) — mapped onto --signal-* ---- */
  --signal-700: #5C2029;
  --signal-600: #71262F;
  --signal-500: #84303A;  /* quiet emphasis accent — tick/hairline, sparing */
  --signal-400: #9C434D;

  --white: #FFFFFF;

  /* ---- Semantic roles (reference these in components, not raw hues) ---- */
  --bg:            var(--bone-100);
  --bg-raised:     var(--bone-50);
  --bg-sunken:     var(--bone-200);
  --bg-inverse:    var(--navy-800);
  --bg-inverse-2:  var(--navy-900);

  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-on-dark:  #E7E3D8;
  --text-on-dark-muted: #9CA2AE;

  --accent:        var(--brass-500);
  --accent-strong: var(--brass-600);
  --accent-on-dark: var(--brass-400);

  /* CTA is now QUIET INK (confident, not barking). Oxblood lives in --tick. */
  --cta:           var(--navy-800);
  --cta-hover:     var(--navy-900);
  --cta-text:      var(--bone-50);
  --tick:          var(--signal-500);   /* the single drop of oxblood */

  --hairline:      color-mix(in srgb, var(--ink-900) 10%, transparent);
  --hairline-soft: color-mix(in srgb, var(--ink-900) 6%, transparent);
  --hairline-dark: color-mix(in srgb, var(--bone-100) 12%, transparent);
  --hairline-brass: color-mix(in srgb, var(--brass-500) 42%, transparent);

  /* Chrome: a fine machined-metal sheen for key rules and frames. */
  --chrome: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--brass-500) 28%, transparent) 18%,
      var(--brass-400) 50%,
      color-mix(in srgb, var(--brass-500) 28%, transparent) 82%,
      transparent 100%);
  --chrome-dark: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--brass-400) 22%, transparent) 20%,
      var(--brass-300) 50%,
      color-mix(in srgb, var(--brass-400) 22%, transparent) 80%,
      transparent 100%);

  --focus-ring:    color-mix(in srgb, var(--brass-400) 80%, white 0%);

  /* ---- Type ---- */
  /* Wordmark/headings: high-contrast Didone serif to echo the L&L monogram. */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia,
                  "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — refined DOWN a step for a gallery, smaller-type feel.
     (clamp: min, preferred, max) */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.80rem, 0.78rem + 0.12vw, 0.88rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.16vw, 1.06rem);
  --step-1:  clamp(1.12rem, 1.06rem + 0.32vw, 1.32rem);
  --step-2:  clamp(1.34rem, 1.22rem + 0.58vw, 1.72rem);
  --step-3:  clamp(1.60rem, 1.40rem + 0.95vw, 2.30rem);
  --step-4:  clamp(1.92rem, 1.58rem + 1.55vw, 3.10rem);
  --step-5:  clamp(2.30rem, 1.80rem + 2.35vw, 4.10rem);

  --leading-tight: 1.06;
  --leading-snug:  1.22;
  --leading-body:  1.62;

  --tracking-tight: -0.014em;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.22em;   /* eyebrow / label letter-spacing — wider, refined */

  /* ---- Spacing scale (8pt-ish, fluid where useful) — more gallery air ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.625rem;
  --space-xl:  2.75rem;
  --space-2xl: clamp(3.5rem, 2.8rem + 2.6vw, 5.5rem);
  --space-3xl: clamp(5rem, 3.6rem + 6vw, 10rem);

  /* ---- Layout ---- */
  --measure:   66ch;
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);

  /* ---- Radii / borders (tight/sharp = corporate, instrument-like) ---- */
  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 6px;
  --border:    1px solid var(--hairline);

  /* ---- Shadows (restrained, gallery-soft) ---- */
  --shadow-sm: 0 1px 2px rgba(12, 14, 18, 0.05);
  --shadow:    0 10px 34px -14px rgba(12, 14, 18, 0.22);
  --shadow-lg: 0 32px 70px -28px rgba(12, 14, 18, 0.42);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* refined deceleration */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;
  --dur-reveal: 1100ms;

  --header-h: 78px;
  --header-h-condensed: 62px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
      scroll-behavior: auto !important; }
}