:root {
  
  --sl-ink:              #0B0A10;   
  --sl-paper:            #F5F3F7;   

  
  --sl-sand:      #F8DDBD;   
  --sl-blush:     #FFD7D7;   
  --sl-marigold:  #FFB410;   
  --sl-cyan-50:  #E3FBFF; --sl-cyan-100: #BBF5FF; --sl-cyan-200: #6DECFF;
  --sl-cyan-300: #00D8F0; --sl-cyan-400: #00CAE0; --sl-cyan-500: #00A1B3;
  --sl-cyan-600: #008594; --sl-cyan-700: #006B77; --sl-cyan-800: #00525B;
  --sl-cyan-900: #003A41; --sl-cyan-950: #00262B;

  
  --sl-violet-50:  #F5F4FF; --sl-violet-100: #E9E6FF; --sl-violet-200: #D6D0FF;
  --sl-violet-300: #C1B4FF; --sl-violet-400: #AA94FF; --sl-violet-500: #946FFF;
  --sl-violet-600: #7B3FF2; --sl-violet-700: #6A19DE; --sl-violet-800: #5200B3;
  --sl-violet-900: #3A0084; --sl-violet-950: #26005C;

  
  --sl-neutral-50:  #F6F4FF; --sl-neutral-100: #E9E8F4; --sl-neutral-200: #D7D5E2;
  --sl-neutral-300: #C0BECC; --sl-neutral-400: #A8A6B3; --sl-neutral-500: #8E8D9A;
  --sl-neutral-600: #767481; --sl-neutral-700: #5E5C69; --sl-neutral-800: #484651;
  --sl-neutral-900: #32313B; --sl-neutral-950: #201F28;

  
  --sl-success-on-paper: #0E7A4D; --sl-success-on-ink: #3DD68C;
  --sl-warning-on-paper: #8A5200; --sl-warning-on-ink: #F0B429;
  --sl-error-on-paper:   #C42B1C; --sl-error-on-ink:   #FF6B5A;

  
  --colors-bg-page:          var(--sl-paper);
  --colors-bg-container:     #FFFFFF;                  
  --colors-bg-subtle:        var(--sl-neutral-100);
  --colors-bg-neutral:       var(--sl-neutral-200);
  --colors-bg-inverse:       var(--sl-ink);              

  --colors-bg-brand:         var(--sl-cyan-400);        
  --colors-bg-accent:        var(--sl-violet-500);       
  --colors-bg-accent-subtle: var(--sl-violet-50);
  --colors-badge-pop:        var(--sl-cyan-50);

  --colors-text-default:     var(--sl-ink);              
  --colors-text-body:        var(--sl-ink);
  --colors-text-subtle:      var(--sl-neutral-700);
  --colors-text-muted:       var(--sl-neutral-500);
  --colors-text-inverse:     var(--sl-paper);            

  --colors-border-default:   var(--sl-neutral-200);
  --colors-border-subtle:    rgba(11, 10, 16, 0.10);

  --colors-btn-primary:      var(--sl-cyan-400);   
  --colors-btn-brand:        var(--sl-cyan-400);
  --colors-btn-earned:       var(--sl-violet-500); 
  --colors-btn-secondary:    var(--sl-neutral-100);

  
  --colors-loud-text:         var(--sl-paper);
  --colors-loud-text-subtle:  var(--sl-neutral-400);
  --colors-loud-bg-container: var(--sl-neutral-950);
  --colors-loud-border:       var(--sl-neutral-900);

  
  --sl-butter-50:     #FDF8EA;   
  --sl-butter-100:    #F6E9BE;   
  --sl-butter-150:    #EFDB98;   

  
  --colors-quiet-bg:          var(--sl-paper);
  --colors-quiet-bg-raised:   #FFFFFF;
  --colors-quiet-border:      var(--sl-neutral-200);
  --colors-quiet-text:        var(--sl-ink);
  --colors-quiet-text-subtle: var(--sl-neutral-700);
  --colors-quiet-link:        var(--sl-violet-600);   

  
  --font-display: 'Bricolage Grotesque', 'Archivo', Impact, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; 

  
  --text-h1:      clamp(3.25rem, 9vw, 7.5rem);   --lh-h1:      0.88;  
  --text-h2:      clamp(2.5rem, 5.5vw, 4.5rem);  --lh-h2:      0.92;  
  --text-h3:      clamp(1.875rem, 3.5vw, 3rem);  --lh-h3:      0.95;  
  --text-stat:    clamp(3rem, 8vw, 6rem);        --lh-stat:    0.9;   
  --text-lead:    1.125rem;   --lh-lead:    1.6;
  --text-body:    1rem;       --lh-body:    1.6;
  --text-small:   0.875rem;   --lh-small:   1.55;
  --text-eyebrow: 0.8125rem;  --lh-eyebrow: 1.45;   

  --track-display: -0.03em;    
  --track-eyebrow:  0.005em;

  
  --radius-card:      16px;
  --radius-panel:     28px;
  --radius-pill:      999px;

  --header-height:    73px;
  --hero-stage:       620px;
  
  --hero-card-top:    94px;
  --hero-card-bottom: 38px;
  --hero-morph:       420px;
  --utility-height:   32px;
  --container-max:    1760px;
  --measure-max:      700px;
  --gutter:           40px;
  --section-gap:      120px;

  --glass-bg:         rgba(11, 10, 16, 0.34);
  --glass-border:     rgba(245, 243, 247, 0.16);
  --glass-hi:         rgba(245, 243, 247, 0.22);
  --glass-glow:       rgba(0, 202, 224, 0.14);
  --glass-blur:       18px;

  --header-h-top:     78px;
  --header-h-scroll:  62px;

  --ease-out:         cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 900px) {
  :root {
    --gutter:    20px;
    --section-gap: 72px;
    --hero-morph: 220px;      
    --hero-card-top:    72px;
    --hero-card-bottom: 20px;
  }
}