/*
  tokens.css
  Design Tokens for a utilitarian, high-contrast industrial aesthetic.
  "A clinical precision meets stark reality. No soft edges. Real data."
*/
:root {
  /* Color Palette - Strict and Stark */
  --c-bg: #FFFFFF; /* Stark white background */
  --c-bg-off: #F4F4F5; /* Very subtle off-white for contrast blocks */
  --c-bg-dark: #09090B; /* Deep charcoal, almost black for inverted blocks */

  --c-fg: #09090B; /* Deep charcoal for primary text */
  --c-fg-muted: #52525B; /* Zinc for secondary text, data points */
  --c-fg-inv: #FFFFFF; /* Text on dark backgrounds */

  --c-accent: #D92D20; /* Clinical red - urgency, precision */
  --c-accent-dark: #B42318; /* Darker red for hover states */
  --c-border: #E4E4E7; /* Light grey for structured lines */
  --c-border-dark: #27272A; /* Dark border for inverted sections */

  --c-warning: #B45309; /* Amber for warnings/mistakes */
  --c-success: #166534; /* Green for positive confirmations */

  /* Typography Scale (Base 16px) */
  --font-display: 'Archivo Black', system-ui, sans-serif;
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 2rem; /* 32px */
  --text-4xl: 2.5rem; /* 40px */
  --text-5xl: 3.5rem; /* 56px */
  --text-6xl: 4.5rem; /* 72px */

  /* Spacing Scale (8px grid) */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* Layout Constraints */
  --max-width: 76rem; /* 1216px */
  --max-width-reading: 42rem; /* 672px */

  /* Borders and Radii (Strictly Sharp) */
  --border-width: 1px;
  --border-width-thick: 2px;
  --radius: 0; /* Strictly 0 for brutalist feel */

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}