/* ─────────────────────────────────────────────
   X3D STUDIO · DESIGN TOKENS
   Direction: Technical Control Surface
   ───────────────────────────────────────────── */

:root {
  /* canvas — cool-neutral dark, not warm */
  --bg:            #111214;
  --bg-elevated:   #191b1e;
  --bg-recessed:   #0a0b0d;
  --surface-data:  #141618;
  --surface-warm:  #1a1816;

  /* text — cool whites, precise */
  --text:          #e8eaed;
  --text-soft:     #9ea3ab;
  --text-mute:     #5c6370;
  --text-faint:    #363a42;

  /* accent — blue leads (tech), rust supports (heritage) */
  --accent:        #4a9fd4;
  --accent-soft:   rgba(74,159,212,0.12);
  --accent-deep:   #3580b3;
  --accent-warm:   #c2673e;
  --accent-warm-soft: rgba(194,103,62,0.12);

  /* rules & borders */
  --rule:          rgba(232,234,237,0.08);
  --rule-strong:   rgba(232,234,237,0.15);
  --rule-accent:   rgba(74,159,212,0.20);

  /* shadows */
  --glow-accent:   0 0 40px rgba(74,159,212,0.06);
  --glow-warm:     0 0 40px rgba(194,103,62,0.06);
  --shadow-card:   0 4px 24px rgba(0,0,0,0.4);

  /* ── type ───────────────────────────────────── */

  /* serif — headlines only, the heritage anchor */
  --font-serif:   'DM Serif Display', Georgia, 'Times New Roman', serif;

  /* sans — body text */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* mono-ui — Space Mono: nav, logo, buttons, labels. Wider, bolder presence. */
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* mono-data — JetBrains Mono: spec numbers, technical data, metadata */
  --font-mono-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* type scale */
  --t-display-xl: clamp(48px, 6vw, 80px);
  --t-display-lg: clamp(36px, 4.5vw, 56px);
  --t-display-md: clamp(28px, 3vw, 40px);
  --t-display-sm: clamp(22px, 2vw, 28px);
  --t-title-lg:   22px;
  --t-title-md:   18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    13px;
  --t-label:      11px;
  --t-spec:       14px;
  --t-spec-sm:    12px;
  --t-spec-lg:    18px;
  --t-spec-xl:    clamp(32px, 5vw, 56px);

  /* leading */
  --leading-display: 1.0;
  --leading-title:   1.30;
  --leading-body:    1.55;
  --leading-mono:    1.40;

  /* tracking */
  --tracking-display: -0.02em;
  --tracking-body:    -0.005em;
  --tracking-mono:     0.02em;
  --tracking-wide:     0.08em;

  /* ── space ──────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2.5rem;
  --s-7: 4rem;
  --s-8: 6rem;
  --s-9: 8rem;
  --s-10: 10rem;

  /* grid */
  --grid-gutter:    clamp(12px, 1.5vw, 24px);
  --content-max:    1400px;
  --content-narrow: 900px;
  --page-pad:       clamp(20px, 4vw, 48px);

  /* ── motion ─────────────────────────────────── */
  --ease:           cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       400ms;
  --dur-cinematic:  600ms;
}