/* ============================================================================
   Lukes Werks — Design Tokens
   Brand: German precision + clockmaker heritage × motorsport speed.
   Source: docs/strategy/brand-identity.md (palette CONFIRM-pending with owner).
   ========================================================================== */

:root {
  /* ---- Core palette ---- */
  --navy-900: #0E1626;   /* deepest — near-black engineering blue */
  --navy-800: #16223A;   /* PRIMARY base (industrial navy) */
  --navy-700: #1F2F4D;
  --navy-600: #2B3F63;
  --navy-500: #3A5180;

  --brass-700: #8A6E32;
  --brass-600: #A07F3B;
  --brass-500: #B08D43;   /* PRIMARY accent (oxidized brass / clockmaker gold) */
  --brass-400: #C6A75E;
  --brass-300: #DCC48C;
  --brass-100: #F0E4C8;   /* faint brass tint for hairlines on light */

  --bone-50:  #FBFAF6;
  --bone-100: #F4F1EA;    /* PRIMARY canvas (bone white) */
  --bone-200: #E8E3D6;
  --bone-300: #D8D1BF;

  --ink-900:  #11151C;    /* body text on light */
  --ink-700:  #2A2F38;
  --ink-500:  #565C66;    /* muted text */
  --ink-300:  #8A909A;

  --signal-700: #9E2114;
  --signal-600: #B62619;
  --signal-500: #C42B1C;  /* CTA / urgency accent — use SPARINGLY */
  --signal-400: #D8503F;

  --white: #FFFFFF;

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

  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-on-dark:  var(--bone-100);
  --text-on-dark-muted: #AEB7C7;

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

  --cta:           var(--signal-500);
  --cta-hover:     var(--signal-600);
  --cta-text:      var(--white);

  --hairline:      color-mix(in srgb, var(--ink-900) 12%, transparent);
  --hairline-dark: color-mix(in srgb, var(--bone-100) 16%, transparent);
  --hairline-brass: color-mix(in srgb, var(--brass-500) 45%, transparent);

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

  /* ---- Type ---- */
  /* Wordmark/headings: condensed grotesk feel (system fallback until web font added). */
  --font-display: "Söhne", "Founders Grotesk", "Inter Tight", "Helvetica Neue",
                  Arial, system-ui, sans-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 (clamp: min, vw, max) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.95rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.15vw, 2.60rem);
  --step-4:  clamp(2.07rem, 1.70rem + 1.85vw, 3.50rem);
  --step-5:  clamp(2.49rem, 1.95rem + 2.70vw, 4.70rem);

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.14em;   /* eyebrow / label letter-spacing */

  /* ---- Spacing scale (8pt-ish, fluid where useful) ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: clamp(4rem, 3rem + 5vw, 8rem);

  /* ---- Layout ---- */
  --measure:   68ch;          /* readable line length */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.8rem + 2.5vw, 3rem);

  /* ---- Radii / borders ---- */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 12px;
  --border:    1px solid var(--hairline);

  /* ---- Shadows (restrained, instrument-like) ---- */
  --shadow-sm: 0 1px 2px rgba(14, 22, 38, 0.06);
  --shadow:    0 6px 24px -8px rgba(14, 22, 38, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(14, 22, 38, 0.35);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 460ms;

  --header-h: 72px;
}

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