:root {

  
  --ink-990: #070D1F;         
  --ink-550: #3A4A75;   
  --ink-500: #475887;   
  --ink-60:  #E1E6ED;   
  --ink-40:  #EAEEF4;   
  --ink-25:  #F2F5FA;   

  --n-400: #ADAFB1;     

  --mavi-700: #0B2FA8;
  --mavi-600: #1041DB;  
  --mavi-200: #A8B8EE;  

  --g-600: #136435;
  --r-600: #a32d26;

  --bg-page:            var(--ink-40);    
  --bg-surface:         var(--ink-25);    
  --bg-sunken:          var(--ink-60);    
  --bg-inverse:         var(--ink-990);         
  --bg-hover:           color-mix(in srgb, var(--ink-990) 4.1%, transparent);  
  --bg-selected:        color-mix(in srgb, var(--ink-990) 8.3%, transparent);  

  --text-primary:       var(--ink-990);   
  --text-secondary:     var(--ink-550);   
  --text-soft:          var(--ink-500);   
  --text-disabled:      var(--n-400);     
  --text-inverse:       var(--ink-25);    
  --text-on-dark:       var(--ink-25);    
  --text-on-dark-muted: var(--mavi-200);  

  --accent:         var(--mavi-600);      
  --accent-hover:   var(--mavi-700);      
  --accent-subtle:  color-mix(in srgb, var(--mavi-600) 7%, var(--bg-page));   

  --border-default: color-mix(in srgb, var(--ink-990) 6%, transparent);
  --border-strong:  color-mix(in srgb, var(--ink-990) 18%, transparent);
  --border-control: color-mix(in srgb, var(--ink-990) 47%, transparent);

  --focus-ring: var(--ink-990);

  

  --r-xs:   4px;
  --r-md:   8px;
  --r-base: 10px;   
  --r-lg:   12px;
  --r-xl:   16px;   
  --r-pill: 9999px; 
  --r-full: 50%;

  --sh-0: none;                            
  --sh-2: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); 

  --border-width: 1px;
  --border-width-thick: 2px;

  --font-body: ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica,
               Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --fs-display: clamp(2.125rem, 1.63rem + 2.1vw, 3.5rem);    
  --fs-h2:      clamp(1.75rem, 1.42rem + 1.4vw, 2.5rem);     
  --fs-h3:      clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);    
  --fs-body-lg: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem); 
  --fs-body:    1rem;      
  --fs-sm:      0.875rem;  
  --fs-eyebrow: 0.75rem;   

  --lh-tight:  1.2;   
  --lh-snug:   1.35;  
  --lh-normal: 1.55;  

  --ls-display: -0.02em;   
  --ls-h2:      -0.015em;  
  --ls-body:    -0.011em;  
  --ls-eyebrow: 0.14em;    

  --fw-regular:  400;  
  --fw-medium:   500;  

  --measure:        31em;    
  --measure-narrow: 22em;    
  --measure-wide:   50em;    

  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-6:  1.5rem;   --sp-8:  2rem;     --sp-12: 3rem;     --sp-16: 4rem;
  --sp-24: 6rem;     --sp-32: 8rem;

  --container-max:  80rem;    
  
  --container-narrow: 61.5rem;
  --gutter:         1.5rem;   
  --gutter-tablet:  2.5rem;   
  --gutter-desktop: 3rem;     

  --section-y:        var(--sp-32);  
  --section-y-tablet: var(--sp-24);  

  --grid-gap:        var(--sp-6);
  --card-pad:        var(--sp-8);
  --card-pad-mobile: var(--sp-6);

  --dur-micro: 150ms;
  --dur-panel: 250ms;   
  --ease:      cubic-bezier(.2, 0, 0, 1);
  --ease-emph: cubic-bezier(.32, .72, 0, 1);

  --tap-min:       44px;      
  
  --nav-h:         3.25rem;   
  
  --nav-brand-h:   1.25rem;   
  
  --nav-panel-col: 22rem;     
  
  --nav-panel-max: 26rem;
  --blur-nav:      12px;      

  --mask-opaque: #000;

  --z-base: 1; --z-sticky: 100; --z-panel: 200; --z-drawer: 300; --z-modal: 400;

  --surface-nav:          color-mix(in srgb, var(--bg-page) 88%, transparent);
  --surface-on-dark:      color-mix(in srgb, var(--ink-25) 12%, transparent);
  --surface-scrim-strong: color-mix(in srgb, var(--ink-990) 76%, transparent);

  --status-success-fg: var(--g-600);
  --status-success-bg: color-mix(in srgb, var(--g-600) 12%, transparent);
  --status-error-fg:   var(--r-600);

  --media-ratio:         16 / 9;

  --tint-silver-lightest: var(--bg-surface);  --tint-silver-lightest-ink: var(--text-primary);
  --tint-blue-light:      var(--bg-surface);  --tint-blue-light-ink:      var(--text-primary);

  
  --tile-paper:  color-mix(in srgb, var(--ink-990)  5%, var(--bg-surface));
  --tile-mist:   color-mix(in srgb, var(--mavi-600) 9%, var(--bg-surface));
  --tile-slate:  color-mix(in srgb, var(--ink-990) 14%, var(--bg-surface));
  
  --tile-accent: color-mix(in srgb, var(--mavi-600) 80%, var(--ink-990));

  --tint-ink:             var(--bg-inverse);  --tint-ink-ink:             var(--text-inverse);
}