/* ==========================================================================
   DIAMOND KING — Design Tokens
   Industrial Premium / Engineering / Modern Tooling
   ========================================================================== */

:root{
  color-scheme: dark;

  /* ---- Color: graphite (dark chrome — header, footer, hero, editorial) ---- */
  --graphite-950:#08090a;
  --graphite-900:#111214;
  --graphite-850:#16181b;
  --graphite-800:#1d1f23;
  --graphite-700:#2a2d32;
  --graphite-600:#3c3f45;
  --graphite-line: rgba(255,255,255,.09);
  --graphite-line-strong: rgba(255,255,255,.16);

  /* ---- Color: paper (light chrome — catalog, product, content pages) ---- */
  --paper-0:#ffffff;
  --paper-50:#f7f7f8;
  --paper-100:#efeff1;
  --paper-line:#e3e3e6;
  --paper-line-strong:#cfcfd4;

  /* ---- Color: ink / steel (text) ---- */
  --ink-950:#0c0d0e;         /* body text on light */
  --steel-600:#50555c;       /* chip text on paper-100 (6.6:1) */
  --steel-500:#6c7178;       /* muted text on light */
  --steel-400:#9a9ea4;       /* muted text on dark */
  --steel-200:#c7cad0;       /* secondary text on dark */
  --white:#ffffff;

  /* ---- Color: brand accent (Diamond King red) ---- */
  --accent-600:#a3111b;       /* dark red: buttons, CTA band, red text on paper */
  --accent-700:#7d0c14;       /* hover / pressed */
  --accent-500:#c8141e;       /* red on graphite; small text also gets --accent-text-glow */
  --accent-glow: rgba(163,17,27,.35);
  --accent-text-glow: 0 0 12px rgba(200,20,30,.55), 0 0 2px rgba(255,60,50,.45);
  --accent-contrast:#ffffff;

  /* ---- Color: metal ---- */
  --metal-200:#d7dade;
  --metal-400:#a7acb3;

  /* ---- Semantic ---- */
  --success:#1f9d55;

  /* ---- Typography ---- */
  --font-display:'Fira Sans Extra Condensed','Arial Narrow',sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;

  --fs-display: clamp(2.75rem, 2rem + 3.4vw, 5.5rem);
  --fs-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.75rem);
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-caption: .75rem;
  --fs-eyebrow: .8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  --ls-tight: -0.01em;
  --ls-wide: .08em;
  --ls-wider: .16em;

  /* ---- Spacing scale ---- */
  --sp-4: .25rem;
  --sp-8: .5rem;
  --sp-12: .75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-96: 6rem;
  --sp-128: 8rem;

  /* ---- Radius (moderate — never large/pill on structural elements) ---- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --notch: 14px; /* chamfered-corner signature cut */

  /* ---- Shadow (minimal) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.24);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --container: 1360px;
  --container-narrow: 900px;
  --header-h: 84px;
  --header-h-scrolled: 64px;
  --z-header: 100;
  --z-megamenu: 90;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}