@import url('https://fonts.googleapis.com/css2?family=Anton&family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  
  --bg-0: #0A0A09;
  --bg-1: #121110;
  --bg-2: #1A1917;
  --bg-3: #222120;
  --bg-4: #2C2A28;

  
  --fg-1: #F3F1ED;   
  --fg-2: #A8A29A;   
  --fg-3: #8A857C;   

  --line-1: rgba(245, 240, 230, 0.10);
  --line-2: rgba(245, 240, 230, 0.17);

  
  --heat-1: #8A6A2E;
  --heat-2: #FFC145;
  --heat-3: #FF6A3D;
  --heat-bg: rgba(255, 193, 69, 0.13);

  --ok: #5CC98B;
  --ok-bg: rgba(92, 201, 139, 0.13);
  --danger: #FF6B6B;
  --danger-bg: rgba(255, 107, 107, 0.13);

  
  --prim: #F3F1ED;
  --on-prim: #0A0A09;
  --focus: #FFC145;

  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  
  --font-display: 'Anton', 'Arial Narrow', 'Haettenschweiler', Impact, var(--font-sans);

  
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-lg: 19px;
  --text-xl: 26px;
  --text-2xl: 36px;
  --text-3xl: 48px;

  --lh-tight: 1.08;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  
  --paper: #F3F1ED;
  --on-paper: #0A0A09;                    
  --on-paper-soft: rgba(10, 10, 9, 0.66); 
  --paper-line: rgba(10, 10, 9, 0.14);
  --paper-line-2: rgba(10, 10, 9, 0.24);
}