/* The Breaking Signal — design tokens. Every color, size and font lives here. */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  /* surfaces — page navy from the spec (#011121), cards a step lighter */
  --bg: #011121;
  --surface: #061a2e;
  --surface-2: #0a2139;
  --line: rgba(150, 180, 220, 0.13);
  --line-strong: rgba(150, 180, 220, 0.24);

  /* text */
  --text: #f3f6fb;
  --text-2: #b3c1d5;
  --text-3: #8899b1;

  /* brand */
  --brand-red: #e10600;

  /* active domain — overwritten from /data/domains.json */
  --accent: #0068fb;
  --accent-fg: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 55%, transparent);

  /* chart neutrals */
  --chart-bar: rgba(160, 185, 220, 0.26);
  --chart-line: rgba(190, 210, 235, 0.55);

  /* type */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --fs-label: 0.875rem;      /* 14px — the floor on every screen */
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-sub: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-title: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-metric: clamp(4rem, 2.6rem + 4vw, 6rem);
  --fs-state: clamp(2.75rem, 2rem + 2vw, 3.75rem);

  /* space */
  --gutter: 16px;
  --gap: 14px;
  --pad: 20px;
  --radius: 14px;
  --radius-sm: 8px;
  --page-max: 1280px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t: 280ms;
}

@media (min-width: 700px) {
  :root { --gutter: 24px; --gap: 18px; --pad: 26px; }
}
@media (min-width: 1100px) {
  :root { --gap: 20px; --pad: 28px; }
}