/* ═══════════════════════════════════════════════════════════════
   brand-tokens.css — KB Brand System Root
   ═══════════════════════════════════════════════════════════════
   THE root file. Every other CSS file reads from this via var().
   To change the entire theme: edit this file + colors.css.

   Dependency graph:
     brand-tokens.css (this file, imports colors.css)
       ├── typography.css → reads tokens
       ├── layout.css → reads tokens
       ├── components.css → reads tokens + layout
       ├── dataviz.css → reads tokens + colors
       └── scrollytelling.css → reads tokens + layout + dataviz
   ═══════════════════════════════════════════════════════════════ */

@import 'colors.css';

:root {
  /* ═══════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════ */

  --font-display: 'DM Mono', 'Courier New', monospace;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-meta:    'Space Mono', 'Courier New', monospace;

  /* Type scale */
  --text-display: 51.5px;
  --text-h2:      32px;
  --text-h3:      22px;
  --text-body:    16.77px;
  --text-meta:    14.38px;
  --text-small:   12px;
  --text-micro:   10px;

  /* Fluid type scale */
  --text-display-fluid: clamp(32px, 5vw, 51.5px);
  --text-h2-fluid:      clamp(24px, 3.5vw, 32px);
  --text-h3-fluid:      clamp(18px, 2.5vw, 22px);

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-body:   1.6;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-normal:  -0.01em;
  --tracking-wide:     0.02em;
  --tracking-caps:     0.08em;

  /* ═══════════════════════════════════════
     SPACING
     ═══════════════════════════════════════ */

  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   38px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl:  140px;

  /* Fluid spacing */
  --space-section: clamp(48px, 8vw, 96px);
  --space-page:    clamp(16px, 4vw, 140px);

  /* ═══════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════ */

  --width-max:     1280px;
  --width-narrow:  800px;
  --width-wide:    1440px;

  /* Two-column project header */
  --header-left:   28%;
  --header-right:  66%;
  --header-gap:    6%;

  /* Three-column homepage grid */
  --grid-card-min: 300px;
  --grid-gap:      38px;

  /* Scrollytelling layout */
  --scrolly-graphic-width: 60%;
  --scrolly-text-width:    35%;
  --scrolly-gap:           5%;

  /* ═══════════════════════════════════════
     BREAKPOINTS (as custom properties for JS)
     ═══════════════════════════════════════ */

  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ═══════════════════════════════════════
     TRANSITIONS & ANIMATION
     ═══════════════════════════════════════ */

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1);

  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-med:     400ms;
  --duration-slow:    800ms;
  --duration-reveal:  1200ms;

  --reveal-distance:  24px;
  --reveal-stagger:   80ms;

  /* ═══════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════ */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-nav:      500;
  --z-toast:    600;

  /* ═══════════════════════════════════════
     BORDERS & RADII
     ═══════════════════════════════════════ */

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════ */

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-nav:  0 1px 12px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 24px 48px rgba(0, 0, 0, 0.22), 0 12px 24px rgba(0, 0, 0, 0.12);

  /* ═══════════════════════════════════════
     COMPONENT DIMENSIONS
     ═══════════════════════════════════════ */

  --nav-height:          56px;
  --nav-height-scrolled: 48px;
  --indicator-bar-height: 3px;
  --gradient-fade-height: 120px;
  --dropdown-min-width:  160px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE TOKEN OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* Tablet and below */
@media (max-width: 768px) {
  :root {
    --grid-gap:      24px;
    --grid-card-min: 260px;
    --space-section: 48px;
    --scrolly-graphic-width: 100%;
    --scrolly-text-width:    100%;
    --scrolly-gap:           0;
  }
}

/* Small phone */
@media (max-width: 480px) {
  :root {
    --grid-gap:      16px;
    --grid-card-min: 100%;
    --space-section: 32px;
    --space-page:    16px;
  }
}