/* ==========================================================================
   Design tokens
   Two layers:
   1. Primitives  - raw values, named by scale. Only this file reads them.
   2. Semantic    - named by role. Components and page styles use only these.
   See design.md and design-system.html for the full reference.
   ========================================================================== */

/* ============ 1. Primitives ============ */
:root {
  /* Color: neutral */
  --neutral-0: #ffffff;
  --neutral-100: #e8e8e8;
  --neutral-200: #d8d8d8;
  --neutral-500: #8c8c8c;
  --neutral-600: #5a5a5a;
  --neutral-700: #434343;
  --neutral-800: #2a2a2a;
  --neutral-900: #111216;
  --neutral-950: #0d0e12;
  --neutral-1000: #040508;

  /* Color: neutral alpha (200 over dark, 1000 over light) */
  --neutral-200-a10: rgba(216, 216, 216, 0.1);
  --neutral-200-a20: rgba(216, 216, 216, 0.2);
  --neutral-200-a32: rgba(216, 216, 216, 0.32);
  --neutral-200-a60: rgba(216, 216, 216, 0.6);
  --neutral-1000-a12: rgba(4, 5, 8, 0.12);

  /* Color: brand */
  --orange-500: #ff5a1f;
  --blue-200: #bfd4ff;

  /* Font family + weight */
  --font-family-grotesk: "Familjen Grotesk", system-ui, sans-serif;
  --font-family-sans: "Inter Tight", system-ui, sans-serif;
  --font-family-mono: "Martian Mono", ui-monospace, monospace;
  --font-weight-400: 400;
  --font-weight-500: 500;

  /* Font size: static */
  --font-size-50: 0.62rem;
  --font-size-75: 0.68rem;
  --font-size-100: 0.79rem;
  --font-size-200: 0.875rem;
  --font-size-300: 0.95rem;
  --font-size-400: 1rem;
  --font-size-500: 1.05rem;

  /* Font size: fluid (min, preferred, max) */
  --font-size-600: clamp(1.1rem, 1.35vw, 1.2rem);
  --font-size-700: clamp(1.25rem, 1.7vw, 1.6rem);
  --font-size-800: clamp(1.4rem, 1.8vw, 1.75rem);
  --font-size-900: clamp(1.5rem, 2.25vw, 2rem);
  --font-size-1000: clamp(2rem, 5vw, 4.5rem);
  --font-size-1100: clamp(2.25rem, 4.2vw, 4rem);
  --font-size-1200: clamp(2.25rem, 5.94vw, 5.35rem);
  --font-size-1300: clamp(2.5rem, 7vw, 6.5rem);
  --font-size-1400: clamp(2.75rem, 6vw, 5.6rem);
  --font-size-1500: clamp(3rem, 6.25vw, 5.625rem);
  --font-size-1600: clamp(3rem, 8vw, 7rem);
  --font-size-stack-sm: clamp(2rem, 10.5vw, 4.5rem);
  --font-size-stack-lg: clamp(3rem, 7.2vw, 8.5rem);

  /* Font size: fits the viewport on both axes (slides, where height is fixed) */
  --font-size-fit-500: clamp(1rem, min(1.45vw, 2.5vh), 1.4rem);
  --font-size-fit-700: clamp(1.25rem, min(2.1vw, 3.6vh), 2.1rem);
  --font-size-fit-1100: clamp(2rem, min(4.4vw, 7.6vh), 4.75rem);
  --font-size-fit-1400: clamp(2.5rem, min(6.6vw, 11.5vh), 7rem);

  /* Line height */
  --leading-76: 0.76;
  --leading-90: 0.9;
  --leading-95: 0.95;
  --leading-100: 1;
  --leading-105: 1.05;
  --leading-110: 1.1;
  --leading-115: 1.15;
  --leading-130: 1.3;
  --leading-135: 1.35;
  --leading-160: 1.6;

  /* Letter spacing */
  --tracking-600: -0.06em;
  --tracking-500: -0.05em;
  --tracking-400: -0.04em;
  --tracking-300: -0.03em;
  --tracking-200: -0.02em;

  /* Space (4px base: --space-N = N x 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-25: 100px;
  --space-30: 120px;
  --space-35: 140px;
  --space-45: 180px;

  /* Size */
  --size-10: 10px;
  --size-13: 13px;
  --size-14: 14px;
  --size-18: 18px;
  --size-20: 20px;
  --size-22: 22px;
  --size-28: 28px;
  --size-30: 30px;
  --size-32: 32px;
  --size-44: 44px;
  --size-48: 48px;
  --size-64: 64px;
  --size-120: 120px;
  --size-160: 160px;
  --size-180: 180px;
  --size-200: 200px;
  --size-227: 227px;
  --size-260: 260px;
  --size-320: 320px;
  --size-440: 440px;
  --size-360: 360px;
  --size-560: 560px;
  --size-640: 640px;

  /* Border + radius */
  --border-1: 1px;
  --border-2: 2px;
  --radius-2: 2px;
  --radius-8: 8px;
  --radius-full: 999px;
  --radius-circle: 50%;

  /* Motion */
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-250: 250ms;
  --duration-300: 300ms;
  --duration-1800: 1800ms;
  --duration-60000: 60s;
  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --easing-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Effects */
  --blur-12: 12px;

  /* Opacity */
  --opacity-40: 0.4;
  --opacity-70: 0.7;
}

/* ============ 2. Semantic ============ */
:root {
  /* Surfaces */
  --color-bg: var(--neutral-1000);              /* page, dark sections */
  --color-bg-inverse: var(--neutral-100);       /* light sections, transitions */
  --color-bg-placeholder: var(--neutral-200);   /* image slot before it loads (light) */
  --color-bg-media: var(--neutral-900);         /* image slot before it loads (dark) */
  --color-paper: var(--neutral-0);              /* solid white chips: puck, skip link */

  /* Text on dark */
  --color-text: var(--neutral-200);
  --color-text-strong: var(--neutral-0);
  --color-text-muted: var(--neutral-200-a60);
  --color-text-subtle: var(--neutral-200-a32);
  --color-text-faint: var(--neutral-200-a10);

  /* Text on light */
  --color-text-inverse: var(--neutral-700);
  --color-text-inverse-strong: var(--neutral-800);
  --color-text-inverse-muted: var(--neutral-600);
  --color-on-paper: var(--neutral-1000);

  /* Lines + accent */
  --color-border: var(--neutral-200-a20);
  --color-border-inverse: var(--neutral-1000-a12);
  --color-accent: var(--orange-500);
  --color-focus: var(--orange-500);
  --color-mark-idle: var(--neutral-800);

  /* Canvas + 3D (read from JS) */
  --color-string: var(--neutral-200);
  --color-string-active: var(--orange-500);
  --color-comet: var(--neutral-0);
  --color-orbit: var(--neutral-500);
  --color-scene-body: var(--neutral-950);
  --color-scene-edge: var(--neutral-200);
  --color-scene-key: var(--neutral-0);
  --color-scene-rim: var(--orange-500);
  --color-scene-fill: var(--blue-200);

  /* Type: families + weights */
  --font-display: var(--font-family-grotesk);
  --font-body: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
  --fw-regular: var(--font-weight-400);
  --fw-medium: var(--font-weight-500);

  /* Type: sizes by role */
  --fs-menu: var(--font-size-1600);
  --fs-hero: var(--font-size-1500);
  --fs-title: var(--font-size-1400);         /* case study title, next project */
  --fs-contact: var(--font-size-1300);       /* footer "Say hello at" */
  --fs-heading: var(--font-size-1200);       /* section headings */
  --fs-impact: var(--font-size-1100);
  --fs-transition: var(--font-size-1000);
  --fs-industry: var(--font-size-stack-sm);
  --fs-card-title: var(--font-size-900);
  --fs-subheading: var(--font-size-800);
  --fs-metric: var(--font-size-700);
  --fs-lead: var(--font-size-600);
  --fs-body-lg: var(--font-size-500);
  --fs-body: var(--font-size-400);
  --fs-caps: var(--font-size-300);
  --fs-note: var(--font-size-300);
  --fs-body-sm: var(--font-size-200);
  --fs-mono: var(--font-size-100);
  --fs-label: var(--font-size-100);
  --fs-caption: var(--font-size-75);
  --fs-micro: var(--font-size-50);

  /* Type: slides (sized to the screen height too, so a slide never overflows) */
  --fs-slide-statement: var(--font-size-fit-1400);
  --fs-slide-title: var(--font-size-fit-1100);
  --fs-slide-number: var(--font-size-fit-1100);
  --fs-slide-subheading: var(--font-size-fit-700);
  --fs-slide-lead: var(--font-size-fit-500);

  /* Type: line height */
  --lh-stack: var(--leading-76);
  --lh-hero: var(--leading-90);
  --lh-display: var(--leading-95);
  --lh-none: var(--leading-100);
  --lh-heading: var(--leading-105);
  --lh-ui: var(--leading-110);
  --lh-note: var(--leading-115);
  --lh-label: var(--leading-130);
  --lh-body: var(--leading-135);
  --lh-reading: var(--leading-160);

  /* Type: letter spacing */
  --ls-display: var(--tracking-600);
  --ls-mono: var(--tracking-600);
  --ls-impact: var(--tracking-500);
  --ls-heading: var(--tracking-400);
  --ls-logo: var(--tracking-300);
  --ls-caps: var(--tracking-200);

  /* Layout */
  --gutter: var(--space-4);
  --tap: var(--size-44);                     /* minimum touch target */
  --section-pad: var(--space-20);
  --section-pad-lg: var(--space-30);
  --header-top: var(--space-4);
  --hairline: var(--border-1);
  --focus-width: var(--border-2);
  --nudge: var(--space-3);                   /* hover shift for big links */

  /* Motion */
  --ease: var(--easing-in-out);
  --ease-out: var(--easing-out);
  --dur-fast: var(--duration-150);
  --dur-fade: var(--duration-200);
  --dur-pop: var(--duration-250);
  --dur: var(--duration-300);
  --dur-loop: var(--duration-1800);
  --dur-marquee: var(--duration-60000);       /* one full lap of the image strip */
  --opacity-pressed: var(--opacity-70);
  --opacity-disabled: var(--opacity-40);
  --blur-reveal: var(--blur-12);           /* text sharpens in from this blur */

  /* Radius */
  --radius-focus: var(--radius-2);
  --radius-media: var(--radius-8);
  --radius-pill: var(--radius-full);
  --radius-round: var(--radius-circle);

  /* Layers */
  --z-lines: 0;
  --z-scene: 1;
  --z-content: 2;
  --z-overlay: 5;
  --z-menu: 90;
  --z-header: 100;
  --z-preloader: 150;
  --z-skip: 200;
  --z-cursor: 300;
  --z-transition-cover: 399;
  --z-transition: 400;
  --z-stack-1: 1;                            /* local stacking inside a section */
  --z-stack-2: 2;
  --z-stack-3: 3;

  /* Component sizes */
  --size-pill: var(--size-32);
  --size-icon-sm: var(--size-18);
  --size-icon: var(--size-20);
  --size-logo: var(--size-22);
  --size-mark: var(--size-28);
  --size-puck: var(--size-48);
  --size-preloader: var(--size-64);
  --size-plus: var(--size-13);
  --plus-offset: var(--size-30);
  --size-cue-w: var(--size-10);
  --size-cue-h: var(--size-14);
  --size-globe-w: var(--size-30);
  --size-globe-h: var(--size-18);
  --stat-cell-min-h: var(--space-18);
  --link-btn-w: var(--size-227);
  --link-btn-w-lg: var(--size-200);
  --link-btn-w-md: var(--size-180);
  --link-btn-w-sm: var(--size-160);
  --metric-min-w: var(--size-120);
  --hero-info-w: var(--size-260);
  --hero-ctas-w: var(--size-320);
  --note-w: var(--size-260);
  --footer-desc-w: var(--size-440);
  --card-w: var(--size-640);
  --card-w-pinned: var(--size-560);
  --card-chrome-h: var(--size-360);          /* vertical space the pinned card leaves around its image */
  --industries-min-h: var(--size-560);
  --case-label-w: var(--size-200);
  --case-text-w: 46rem;
  --title-measure: 14ch;
  --note-measure: 30ch;
  --gap-figures: var(--space-5);
  --slide-text-w: 40rem;                     /* reading width on a slide */
  --timeline-bar-h: clamp(var(--size-44), 7.5vh, var(--size-64));
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-9);
    --header-top: var(--space-9);
    --fs-industry: var(--font-size-stack-lg);
  }
}