/* ============================================================
   LocalSignal — Design Tokens
   Bold. Futuristic. Enterprise-grade.
   ============================================================ */

:root {
  /* -------- Type scale (fluid) -------- */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  --text-hero: clamp(3.5rem, 1.5rem + 8vw, 9rem);

  /* -------- Spacing (4px base) -------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* -------- Color: LocalSignal Obsidian Signal -------- */
  /* Deep obsidian with electric cyan signal — the color of a live data terminal. */

  /* Surfaces */
  --color-bg: #060809;
  --color-surface: #0b0e10;
  --color-surface-2: #12161a;
  --color-surface-3: #1a1f24;
  --color-surface-offset: #0e1114;
  --color-border: #1e252c;
  --color-border-strong: #2b3540;
  --color-divider: #151a1f;

  /* Text */
  --color-text: #e8eef4;
  --color-text-strong: #ffffff;
  --color-text-muted: #8996a4;
  --color-text-faint: #4a5563;
  --color-text-inverse: #060809;

  /* Signal Cyan — the accent. */
  --color-signal: #22d3ee;
  --color-signal-bright: #67e8f9;
  --color-signal-dim: #0891b2;
  --color-signal-glow: rgba(34, 211, 238, 0.35);
  --color-signal-veil: rgba(34, 211, 238, 0.08);

  /* Secondary accent — deep aqua for depth */
  --color-aqua: #14b8a6;
  --color-aqua-dim: #0d9488;

  /* Data viz auxiliaries */
  --color-heat-hot: #22d3ee;    /* invest here */
  --color-heat-mid: #64748b;    /* neutral */
  --color-heat-cold: #ec4899;   /* cut spend */
  --color-success: #10b981;
  --color-warning: #f59e0b;

  /* -------- Radius -------- */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-full: 9999px;

  /* -------- Motion -------- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* -------- Elevation -------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-signal: 0 0 40px rgba(34, 211, 238, 0.18);
  --shadow-signal-strong: 0 0 80px rgba(34, 211, 238, 0.35);

  /* -------- Content widths -------- */
  --content-narrow: 42rem;
  --content-default: 68rem;
  --content-wide: 84rem;
  --content-max: 96rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* -------- Fonts -------- */
  --font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}