:root {
  --surface-base:   #FBFAF7;
  --surface-raised: #F2F0EB;
  --surface-deep:   #16264A;
  --ink:            #1A1A1A;
  --ink-navy:       #16264A;
  --ink-muted:      #5B6472;
  --ink-inverse:    #FFFFFF;
  --teal:           #27B4B4;
  --teal-dim:       #1E8F8F;
  --rule:           #E4E7EC;
  --rule-strong:    #C9CFD8;
  
  --surface-tint:    #EDF0F6;
  --surface-deepest: #0F1B35;
  
  --surface-tint-deep: #E0E4EC;
  --surface-ink:       #0A1121;
  
  --surface-deep-raised: #1D3157;
  --ink-inverse-muted:   #A6ACBA;
  --rule-deep:           rgba(255, 255, 255, 0.14);
  --rule-deep-mark:      rgba(255, 255, 255, 0.34);
  
  --accent-on-light: var(--teal-dim);
  --accent-on-deep:  var(--teal);
  
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --size-display:  clamp(40px, 4.4vw, 56px);
  --size-title:    clamp(26px, 2.8vw, 32px);
  --size-subtitle: 20px;
  --size-body:     17px;
  --size-small:    15px;
  --size-label:    13px;
  
  --container: 1200px;
  --gutter:    clamp(24px, 5vw, 64px);
  --col-gap:   24px;
  
  --seam: clamp(64px, 7vw, 96px);
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;
  
  --radius: 2px;
  
  --shadow-1: 0 1px 2px rgba(22, 38, 74, 0.06), 0 8px 24px rgba(22, 38, 74, 0.06);
  --shadow-2: 0 2px 4px rgba(22, 38, 74, 0.08), 0 24px 60px rgba(22, 38, 74, 0.10);
  
  --shadow-deep-1: 0 1px 2px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-deep-2: 0 2px 4px rgba(0, 0, 0, 0.24), 0 24px 60px rgba(0, 0, 0, 0.42);
  
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-arrive: 520ms;
  --dur-marquee: 64s;
}