/* InboundOps brand tokens (Signal system v1.0, Oct 2026). Drop-in replacement for /assets/tokens.css. */
@font-face { font-family: "Archivo"; src: url("/assets/approved-archivo.6dfc3a7f8ff9.6dfc3a7f8ff9.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/approved-plusjakartasans.0e670677b961.0e670677b961.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/approved-jetbrainsmono.c46670222273.c46670222273.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* color: Ink 60 / Bone 30 / Slate 8 / Signal 2 */
  --ink: #0C0E12;          /* default background */
  --graphite: #16191F;     /* raised surfaces on ink (cards) */
  --line-dark: #262A33;    /* borders on ink */
  --bone: #F1EEE6;         /* text on ink, light sections */
  --bone-2: #E4E0D6;       /* alternate light section */
  --line-light: #D6D1C5;   /* borders on bone */
  --slate: #8A93A3;        /* secondary text on ink (6.2:1) */
  --slate-light: #596170;  /* secondary text on bone (5.4:1) */
  --signal: #FF5A1F;       /* the lead. ONE per screen. Never text on bone (2.7:1). Ink text on it, never white. */

  /* type */
  --font-display: "Archivo", sans-serif;          /* weight 800, font-stretch 112%, tracking -0.03em */
  --font-body: "Plus Jakarta Sans", sans-serif;   /* 400 / 700 */
  --font-mono: "JetBrains Mono", monospace;       /* 500, measurements only: times, timers, numbers, labels */
  --size-hero: clamp(3.25rem, 6.5vw, 6.5rem);     /* 52 -> 104 */
  --size-section: clamp(2.375rem, 4vw, 4rem);     /* 38 -> 64 */
  --size-sub: clamp(1.5rem, 2vw, 2rem);           /* 24 -> 32 */
  --size-body: clamp(1.0625rem, 1.2vw, 1.25rem);  /* 17 -> 20 */
  --size-data: clamp(0.9375rem, 1vw, 1.125rem);   /* 15 -> 18 */
  --size-label: 0.8125rem;                        /* 13, uppercase, tracking 0.08em */
  --measure: 60ch;

  /* space: 8px base, use only these */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem; --s-7: 6rem; --s-8: 8rem;
  --gutter: clamp(1rem, 4vw, 4rem);
  --max: 90rem;
  --radius: 6px;            /* buttons, inputs */
  --radius-card: 10px;      /* lead cards, panels */

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);   /* ease-out, no overshoot */
  --t-state: 240ms;                        /* every state change */
  --countdown: 120s;                       /* real time; hero loop may run at 10x (12s) */
}

body { background: var(--ink); color: var(--bone); font-family: var(--font-body); font-size: var(--size-body); line-height: 1.5; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1; }
.mono, time { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.label { font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.light { background: var(--bone); color: var(--ink); } .light .label { color: var(--slate-light); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }