:root {
  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-text: 'Chivo', system-ui, sans-serif;

  /* Type Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;
  --text-6xl: 4rem;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Industrial / Editorial Color Palette */
  /* High contrast, avoid generic modern SaaS colors */
  --color-black: #111111;
  --color-ink: #1a1a1a;
  --color-slate-900: #262626;
  --color-slate-700: #404040;
  --color-slate-500: #737373;
  --color-slate-300: #d4d4d4;
  --color-slate-100: #f5f5f5;
  --color-white: #ffffff;
  --color-paper: #faf9f6;

  /* Accents */
  --color-accent-red: #c8102e; /* Phillies / local red vibe */
  --color-accent-gold: #ffb81c; /* Keel vibe */
  --color-accent-blue: #003087;

  /* Structural Colors */
  --bg-primary: var(--color-paper);
  --bg-secondary: var(--color-white);
  --bg-inverse: var(--color-ink);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-slate-700);
  --text-inverse: var(--color-paper);

  --border-color: var(--color-slate-900);
  --border-light: var(--color-slate-300);

  /* Spacing (Base 4px/8px system) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1440px;
  --container-md: 1024px;
  --container-sm: 768px;
  --container-narrow: 65ch;

  /* Borders & Shadows */
  --radius-none: 0;
  --radius-sm: 2px;
  --border-width-thin: 1px;
  --border-width-thick: 2px;

  --shadow-sharp: 4px 4px 0 var(--color-black);
}