/* ============================================================
   Charles Hamilton — Design Tokens
   Extracted verbatim from design-system.html (v1.0).
   SINGLE SOURCE OF TRUTH. Do not introduce values outside this file.
   The only additions are responsive clamp() type sizes whose
   MAXIMUMS equal the system's locked desktop px values.
   ============================================================ */

:root {
  /* ── Backgrounds + Surfaces ─────────────────────────── */
  --color-bg:           #17181A;
  --color-surface-1:    #1E2023;
  --color-surface-2:    #242629;
  --color-surface-3:    #2C2F33;

  /* ── Text (white only — opacity carries hierarchy) ──── */
  --color-text-primary:    #FFFFFF;
  --color-text-body:       rgba(255,255,255,0.70);
  --color-text-secondary:  rgba(255,255,255,0.50);
  --color-text-disabled:   rgba(255,255,255,0.25);

  /* ── Borders ────────────────────────────────────────── */
  --color-border:          rgba(255,255,255,0.08);
  --color-border-hover:    rgba(255,255,255,0.16);
  --color-border-strong:   rgba(255,255,255,0.24);

  /* ── Buttons ────────────────────────────────────────── */
  --color-btn-primary-bg:        #FFFFFF;
  --color-btn-primary-text:      #17181A;
  --color-btn-secondary-bg:      rgba(255,255,255,0.08);
  --color-btn-secondary-border:  rgba(255,255,255,0.50);

  /* ── Fonts ──────────────────────────────────────────── */
  --font-heading:  'Shippori Mincho B1', serif;
  --font-body:     'Space Grotesk', sans-serif;
  --font-ui:       'Space Mono', monospace;

  /* ── Type scale — locked desktop px ─────────────────── */
  --text-h1:        120px;
  --text-h2:        80px;
  --text-h3:        64px;
  --text-h4:        50px;
  --text-body-xl:   32px;
  --text-body-lg:   24px;
  --text-body-md:   20px;
  --text-body-sm:   14px;
  --text-label-lg:  14px;
  --text-label-md:  12px;
  --text-label-sm:  10px;

  /* ── Type scale — responsive (min, fluid, MAX = locked) ─ */
  --fluid-h1:       clamp(2.75rem, 9vw,   120px);  /* 44 → 120 */
  --fluid-h2:       clamp(2.25rem, 6.5vw,  80px);  /* 36 → 80  */
  --fluid-h3:       clamp(2rem,    5vw,    64px);  /* 32 → 64  */
  --fluid-h4:       clamp(1.75rem, 4vw,    50px);  /* 28 → 50  */
  --fluid-body-xl:  clamp(1.375rem, 2.6vw, 32px);  /* 22 → 32  */
  --fluid-body-lg:  clamp(1.25rem, 2vw,    24px);  /* 20 → 24  */

  /* ── Tracking ───────────────────────────────────────── */
  --track-h1:   -0.04em;
  --track-h2:   -0.03em;
  --track-h3:   -0.02em;
  --track-h4:   -0.02em;
  --track-label-sm: 0.16em;
  --track-label-md: 0.10em;
  --track-label-lg: 0.08em;

  /* ── Border radius ──────────────────────────────────── */
  --radius-card:  24px;
  --radius-tag:   12px;
  --radius-btn:   9999px;
  --radius-sm:    8px;
  --radius-xs:    4px;

  /* ── Motion ─────────────────────────────────────────── */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:      200ms;
  --duration-base:      350ms;
  --duration-slow:      700ms;
  --duration-cinematic: 1100ms;

  /* ── Layout ─────────────────────────────────────────── */
  --gutter:       clamp(24px, 6vw, 96px);
  --maxw:         1400px;

  /* ── Fluid spacing scale ────────────────────────────────
     One vertical rhythm for the whole page. Each step is a
     viewport-fluid clamp so spacing breathes with the screen
     yet stays proportional. Use these instead of ad-hoc clamps. */
  --space-3xs:     clamp(8px,   1vh,    12px);
  --space-2xs:     clamp(12px,  1.6vh,  18px);
  --space-xs:      clamp(16px,  2.2vh,  24px);
  --space-sm:      clamp(20px,  2.8vh,  32px);
  --space-md:      clamp(28px,  4vh,    48px);
  --space-lg:      clamp(40px,  6vh,    72px);
  --space-xl:      clamp(52px,  8vh,    96px);
  --space-2xl:     clamp(64px,  10vh,   120px);
  --space-3xl:     clamp(80px,  12vh,   144px);
  --space-section: clamp(120px, 18vh,   220px);
}