@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/static/fonts/Newsreader-Variable.ttf') format('truetype'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('/static/fonts/Newsreader-Italic-Variable.ttf') format('truetype'); }
@font-face { font-family: 'Major Mono Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/MajorMonoDisplay-Regular.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/JetBrainsMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/JetBrainsMono-Medium.ttf') format('truetype'); }:root {
  --color-background: #0A0E1A;
  --color-surface: #111827;
  --color-surface-2: #182030;
  --color-panel: #0C1322;
  --color-text: #DDD8D0;
  --color-heading: #EAE5D8;
  --color-muted: #94A3B8;
  --color-faint: #5C6B83;
  --color-accent: #5EEAD4;
  --color-accent-dim: #2D7A6E;
  --color-warm: #E8C88A;
  --color-border: #1E2D42;
  --color-hairline: #182338;
  --font-family: 'Newsreader', Georgia, serif;
  --font-display: 'Major Mono Display', monospace;
  --font-heading: 'Newsreader', Georgia, serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-hero: clamp(2.6rem, 6.2vw, 5rem);
  --font-h2: clamp(1.5rem, 3vw, 2.2rem);
  --font-body-size: 1.1rem;
  --space-section: clamp(6rem, 14vh, 12rem);
  --space-block: 5rem;
  --space-element: 2rem;
  --effect-transition-fast: 0.15s ease;
  --effect-transition-base: 0.2s ease-out;
  --effect-transition-slow: 0.3s ease;
  --effect-shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
  --effect-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --effect-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --effect-shadow-brutal: 4px 4px 0px;
  --effect-blur-sm: 4px;
  --effect-blur-md: 8px;
  --effect-blur-lg: 16px;
  --effect-border-thin: 1px;
  --effect-border-medium: 2px;
  --effect-border-thick: 4px;
  --effect-border-brutal: 8px;
  --effect-z-base: 0;
  --effect-z-content: 10;
  --effect-z-nav: 50;
  --effect-z-modal: 100;
  --effect-z-toast: 200;
}