/* FUTUREWAVE design tokens.

   The palette carries the argument, it is not decoration:
   AMBER  = the human labor line — hours, wages, the money being spent today.
   SIGNAL = the machine — sensors, autonomy, the thing taking that task over.
   Every payback visual moves from amber into signal. Nothing else uses signal.

   HOT is reserved for the hazard-stripe divider and error states. Never a button. */
:root {
  --void: #05070d;
  --deep: #080c16;
  --steel: #111826;
  --steel-2: #172133;
  --line: rgba(238, 242, 248, 0.1);
  --line-strong: rgba(238, 242, 248, 0.2);

  --amber: #ffb000;
  --amber-soft: rgba(255, 176, 0, 0.14);
  --amber-glow: 0 0 0.6em rgba(255, 176, 0, 0.45), 0 0 2.2em rgba(255, 176, 0, 0.16);

  --signal: #35e8ff;
  --signal-soft: rgba(53, 232, 255, 0.12);
  --signal-glow: 0 0 0.6em rgba(53, 232, 255, 0.5), 0 0 2.4em rgba(53, 232, 255, 0.18);

  --hot: #ff5a3c;
  --paper: #eef2f8;
  --muted: #98a4bc;

  --display: 'Chakra Petch', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale, 1.25 ratio off a 16px base */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.563rem;
  --t-2xl: 1.953rem;
  --t-3xl: 2.441rem;
  --t-4xl: 3.052rem;
  --t-hero: clamp(2.1rem, 3.6vw, 3.5rem);

  /* Spacing scale, 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --maxw: 1240px;
  --gutter: 1rem;
  --radius: 4px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
  }
}