:root {
  

  
  --bg:           #0b0d10;   
  --surface:      #13151b;   
  --surface-2:    #1b1e26;   
  --surface-3:    #242833;   
  --border:       #2b2f3a;   

  
  --text:         #e9eaef;   
  --text-muted:   #888ea0;   
  --text-dim:     #535867;   

  
  --steel:        #9aa6bd;   
  --steel-dim:    #5b6478;   
  --steel-tint:   rgba(154, 166, 189, 0.14);

  
  --success:      #5cb88a;
  --warn:         #e6b04c;
  --danger:       #e07a6a;
  --success-tint: rgba(92, 184, 138, 0.14);
  --warn-tint:    rgba(230, 176, 76, 0.14);
  --danger-tint:  rgba(224, 122, 106, 0.14);

  
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --font-head:    var(--font-display);   

  
  --fs-2xs:  0.6875rem;  
  --fs-xs:   0.75rem;    
  --fs-sm:   0.8125rem;  
  --fs-md:   0.875rem;   
  --fs-base: 1rem;       
  --fs-lg:   1.375rem;   
  --fs-xl:   1.875rem;   
  --fs-2xl:  2.875rem;   

  
  --ls-tight:  0.5px;
  --ls-label:  0.8px;    
  --ls-title:  0.5px;    
  --ls-wide:   1px;      

  
  --space-3xs: 0.25rem;  
  --space-2xs: 0.375rem; 
  --space-xs:  0.5rem;   
  --space-sm:  0.75rem;  
  --space-md:  1rem;     
  --space-lg:  1.5rem;   
  --space-xl:  2rem;     
  --space-2xl: 3rem;     

  
  --radius-sm:   6px;
  --radius:      8px;    
  --radius-lg:   10px;   
  --radius-pill: 999px;  

  
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-pop:   0 4px 14px rgba(0, 0, 0, 0.35);

  
  --motion-fast: 0.15s ease;
  --motion-base: 0.2s ease;
  --motion-slow: 0.24s ease;

  
  --z-sticky:  100;   
  --z-overlay: 500;   
  --z-toast:   900;   
  --z-tooltip: 1000;  

  
  --app-width: 1040px;
  --app-pad:   22px;   
}


html { font-size: 18px; }