/* Vortex design tokens · v1 (approved 2026-09-12).
   Verbatim from design/tokens.css, plus self-hosted faces and the derived block at the bottom.
   Components use tokens only; no literal colours anywhere else. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../../font/instrument-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../../font/doto-latin.woff2') format('woff2');
}

:root {
  /* ink & greys (warm-neutral) */
  --ink: #141614;          /* text, active tiles, wires */
  --ink-2: #5C5F5B;        /* secondary text, nav */
  --ink-3: #8A8D88;        /* meta text ≥ 11 px only, engraved labels */
  --line: #D8D8D3;         /* card borders, dividers */
  --hairline: #ECECE8;     /* row separators, nav-active bg */
  --bg: #F6F6F4;           /* page */
  --surface: #FFFFFF;      /* cards */
  --control: #E9E9E5;      /* segmented control track */
  --bar: #D6D6D2;          /* chart bars, inactive */
  /* the one signal hue: "needs you" */
  --signal: #2E5FCF;       /* filled = approve (blinks), outlined = check */
  --signal-text: #234AA8;
  --signal-tint: #E8EEFB;
  --fail: #B5271C;
  /* instrument (bezel + glass) */
  --bezel-top: #F4F4F1; --bezel-bottom: #E6E6E2; --bezel-border: #CBCBC6;
  --glass-center: #FDFDFB; --glass-edge: #F2F2EE; --glass-inset: #CFCFCA;
  --glass-edge-phone: #F3F3EF;
  /* type */
  --font-text: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;   /* self-hosted, OFL */
  --font-digits: 'Doto', 'Courier New', monospace;                        /* self-hosted, OFL; digits, times, counters only */
  --fs-title: 17px; --fs-nav: 14px; --fs-body: 13.5px; --fs-fact: 13px; --fs-meta: 12.5px;
  --fs-node: 12px; --fs-node-meta: 11px; --fs-label: 11px; /* uppercase, letter-spacing .08em, weight 700 */
  --fs-counter: 22px; --fs-counter-lg: 28px; --fs-tile-value: clamp(32px, calc(14px + 1.8vw), 48px);  /* dot-matrix scale raised 25 Sept (owner: too small); grows with the tile 26 Sept */
  /* radii */
  --r-tile: 8px; --r-card: 12px; --r-card-phone: 14px; --r-bezel: 16px; --r-glass: 9px; --r-pill: 999px;
  /* sizes */
  --sidebar: 220px; --topbar: 56px; --row: 44px; --btn: 36px; --btn-big: 46px; --tile: 32px; --tile-sm: 28px;
  /* graph */
  --wire: 1.5px; --wire-corner: 6px; --junction: 2.6px; --graph-row: 76px; --graph-row-compact: 60px;
  /* motion */
  --blink: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { :root { --blink: none; } }

/* ── derived · values the artboards used literally, named here so components stay token-only ── */
:root {
  --ink-fact: #3A3D3A;        /* the facts list inside a card (artboard literal) */
  --ink-engraved: #8E918C;    /* engraved label on the bezel, lighter than --ink-3 */
  --class-empty: #E4E4E0;     /* unfilled square of the class meter */
  --camera: #1A1C1B;          /* phone pair: the camera glass */
  --camera-edge: #0E0F0E;
  --camera-ink: #C8CAC6;
  --white: #FFFFFF;           /* tile fills and knockout ink */

  --sheen: linear-gradient(112deg, rgba(255,255,255,.55) 0 18%, transparent 36%);
  --bezel-face: linear-gradient(180deg, var(--bezel-top) 0%, var(--bezel-bottom) 100%);
  --glass-face: radial-gradient(130% 100% at 50% 30%, var(--glass-center) 0%, var(--glass-edge) 100%);
  --glass-face-phone: radial-gradient(130% 100% at 50% 20%, var(--glass-center) 0%, var(--glass-edge-phone) 100%);
  --shadow-bezel: inset 0 1px 0 var(--white), 0 1px 2px rgba(0,0,0,.08), 0 16px 32px -20px rgba(0,0,0,.35);
  --shadow-glass: inset 0 0 0 1px var(--glass-inset), inset 0 2px 6px rgba(0,0,0,.14), inset 0 -1px 0 rgba(255,255,255,.8);
  --shadow-seg: 0 1px 2px rgba(0,0,0,.12);
  --shadow-tooltip: 0 6px 16px -6px rgba(0,0,0,.45);
  --ring-signal: 0 0 0 3px var(--signal-tint);

  /* dot-matrix sizes, each one a role the artboards use */
  /* one scale, one token per role, every screen and width (25 Sept): Doto's small x-height needs
     these sizes to read as well as the 13.5 px text beside it */
  --fs-digit-badge: 12px; --fs-digit-time: 14px; --fs-digit-meta: 15px;
  --fs-digit-inline: 16px; --fs-digit-row: 17px; --fs-digit-step: 24px;

  /* type the artboards set on single elements */
  --fs-h1-phone: 24px; --fs-screen-title: 22px; --fs-item: 16px; --fs-h2: 14px;
  --fs-chip: 11.5px; --fs-legend: 11px; --fs-tab: 10.5px;
  --fs-tabbar: 12px; --fs-tabbar-sm: 11px;   /* phone-width bottom tab bar labels (Material 3 label-medium) */
  --ls-label: .08em; --ls-status: .04em; --ls-engraved: .12em; --ls-tight: -.01em;
}