@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
}

:root {
  
  --c-ink:       #0E0E0E;   
  --c-paper:     #FFFFFF;   
  --c-signal:    #FA8057;   
  --c-signal-hi: #FB9966;   
  --c-alert:     #F9444B;   
  --c-steel:     #5C6577;   

  
  --c-silver:    #BEC4D0;   
  --c-silver-hi: #D7DBE3;   
  --c-silver-lo: #828BA0;   

  
  --c-carbon: var(--c-ink);
  --c-bone:   var(--c-paper);

  --c-paper-rgb:   255, 255, 255;
  --c-silver-rgb:  190, 196, 208;
  --c-ink-rgb:     14, 14, 14;
  --c-bone-rgb:    255, 255, 255;   
  --c-carbon-rgb:  14, 14, 14;      

  
  --bg-desktop: radial-gradient(120% 120% at 50% 18%,
                  var(--c-silver-hi) 0%,
                  var(--c-silver) 46%,
                  var(--c-silver-lo) 100%);

  
  --bg:            var(--c-silver);      
  --surface:       var(--c-paper);       
  --fg:            var(--c-ink);
  --fg-muted:      var(--c-steel);
  --accent:        var(--c-signal);
  --accent-hi:     var(--c-signal-hi);
  --alert:         var(--c-alert);
  --border:        rgba(14, 14, 14, 0.10);
  --border-strong: rgba(14, 14, 14, 0.20);

  
  --bg-dark:            #161214;
  --surface-dark:       #1C1718;
  --fg-dark:            var(--c-paper);
  --fg-muted-dark:      rgba(255, 255, 255, 0.55);
  --border-dark:        rgba(255, 255, 255, 0.10);
  --border-strong-dark: rgba(255, 255, 255, 0.20);

  
  --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --w-regular: 400;
  --w-medium:  500;

  
  --t-display-xl: 4rem;       
  --t-display-lg: 3rem;       
  --t-display-md: 2rem;       
  --t-display-sm: 1.5rem;     
  --t-body-lg:    1.125rem;   
  --t-body:       1rem;       
  --t-body-sm:    0.875rem;   
  --t-meta:       0.75rem;    
  --t-micro:      0.6875rem;  

  --lh-display: 1.1;
  --lh-body:    1.65;
  --lh-mono:    1.5;

  --tr-display: -0.02em;
  --tr-mark:    -0.03em;

  
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  
  --motion-fast: 120ms ease-out;
}


[data-theme="dark"] {
  --bg:            var(--bg-dark);
  --surface:       var(--surface-dark);
  --fg:            var(--fg-dark);
  --fg-muted:      var(--fg-muted-dark);
  --border:        var(--border-dark);
  --border-strong: var(--border-strong-dark);
}

