/* tokens.css - Industrial maritime aesthetic */
:root {
  /* Colors - Industrial Maritime Palette
     Avoiding purple-to-blue gradients and generic modern UI tones.
     Going for deep, stark, high-contrast colors.
  */
  --c-void: #030a0d;       /* Nearly black blue/green for backgrounds */
  --c-abyss: #07151a;      /* Deep dark background */
  --c-steel: #2e434f;      /* Industrial mid-tone */
  --c-rust: #c25934;       /* Harsh accent color, high contrast */
  --c-foam: #e1e9ec;       /* Off-white text */
  --c-bone: #f8f9fa;       /* Purest white for highest contrast headers */
  --c-warning: #d9b130;    /* Muted yellow for alerts/cautions */

  /* Typography
     Display: Space Grotesk (from memory requirements or industrial feel)
     Text: Chivo (from memory requirements or highly readable stark sans)
  */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-text: 'Chivo', system-ui, sans-serif;

  /* Scale - Major Third */
  --ts-xs: 0.79rem;
  --ts-sm: 0.889rem;
  --ts-base: 1rem;
  --ts-md: 1.125rem;
  --ts-lg: 1.266rem;
  --ts-xl: 1.424rem;
  --ts-2xl: 1.602rem;
  --ts-3xl: 1.802rem;
  --ts-4xl: 2.027rem;
  --ts-5xl: 2.566rem;
  --ts-6xl: 3.208rem;
  --ts-7xl: 4.01rem;
  --ts-8xl: 5.012rem;

  /* Layout */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --container-max: 1440px;
  --content-w: 72ch;

  /* Borders */
  --b-thin: 1px solid var(--c-steel);
  --b-thick: 3px solid var(--c-rust);
}