@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 200 600;
  font-style: normal;
  font-display: swap;
}

:root {
  
  --deep: #050507;
  --night: #0A0A0F;
  --ink: #0E0E14;
  --ink-soft: #2A2A33;
  --ink-mute: #5A5A66;
  --ink-faint: #8A8A95;
  --soft: #F5F5F2;
  --warm: #FAFAF7;
  --paper: #FFFFFF;

  
  --violet: #9B87EA;
  --violet-deep: #6E59C7;
  --violet-glow: #C4B5FD;

  
  --line: rgba(20, 20, 28, 0.10);
  --line-strong: rgba(20, 20, 28, 0.18);
  --line-dark: rgba(255, 255, 255, 0.10);
  --line-dark-strong: rgba(255, 255, 255, 0.22);

  
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, 0.82);
  --on-dark-mute: rgba(255, 255, 255, 0.62);
  --on-dark-legal: rgba(255, 255, 255, 0.55);

  
  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  
  --fs-display: clamp(2.75rem, 1.543rem + 4.952vw, 6rem);       
  --fs-h2: clamp(2rem, 1.443rem + 2.286vw, 3.5rem);             
  --fs-h3: clamp(1.375rem, 1.236rem + 0.571vw, 1.75rem);        
  --fs-h4: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);     
  --fs-lead: clamp(1.125rem, 1.055rem + 0.286vw, 1.3125rem);    
  --fs-body: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);         
  --fs-small: 0.875rem;                                       
  --fs-eyebrow: 0.75rem;                                      
  --fs-kpi: clamp(3rem, 2.26rem + 3.05vw, 5rem);              

  --track-display: -0.04em;
  --track-h2: -0.038em;
  --track-h3: -0.025em;
  --track-h4: -0.015em;
  --track-eyebrow: 0.22em;
  --track-button: 0.18em;
  --track-kpi: -0.045em;

  --measure: 68ch;

  
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 200px;

  --section-y: clamp(96px, 72.2px + 6.1vw, 160px);
  --section-y-open: clamp(128px, 101.3px + 6.86vw, 200px);
  --container: 1280px;
  --gutter: clamp(20px, -2.3px + 5.71vw, 80px);
  --grid-gap: clamp(24px, 22px + 0.6vw, 32px);

  --radius-control: 2px;
  --accent-rule: 44px;

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --d-hover: 200ms;
  --d-ui: 400ms;
  --d-reveal: 800ms;
  --d-long: 1200ms;
  --stagger: 80ms;
  --shift: 24px;
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.force-motion) {
    --d-ui: 0ms;
    --d-reveal: 0ms;
    --d-long: 0ms;
    --stagger: 0ms;
    --shift: 0px;
  }
}