/* ==========================================================================
   tokens.css — the design system

   Direction: a bench instrument's datasheet. The subject of this tool is the
   telegram — eight bytes in fixed positions — so the type system is built
   around a monospace with true tabular figures, and the layout language is
   the aligned column rather than the rounded card.

   Palette is deliberately cool and technical (not warm paper, not near-black
   with a neon accent). The accent descends from the blue of the original CVI
   tool so the app still reads as the same instrument. tx/rx have their own
   hues because direction-of-travel is real information, not decoration.

   Theming contract: the complete light palette lives on bare :root. Dark
   overrides appear twice — once behind prefers-color-scheme for the system
   default, once behind [data-theme="dark"] so the explicit toggle wins. No
   colour is ever defined only inside a media query.
   ========================================================================== */

:root {
  /* --- type ------------------------------------------------------------ */
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
    'Roboto Mono', Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11px — section labels, byte captions */
  --text-xs: 0.75rem; /* 12px — units, hints */
  --text-sm: 0.8125rem; /* 13px — controls, log */
  --text-md: 0.875rem; /* 14px — body */
  --text-lg: 1rem; /* 16px — panel titles */
  --text-xl: 1.375rem; /* 22px — readouts */
  --text-2xl: 1.75rem; /* 28px — hero readout */

  --leading-tight: 1.2;
  --leading-normal: 1.55;

  --tracking-label: 0.13em; /* section labels */
  --tracking-mono: 0.01em;

  /* --- spacing (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* --- shape ------------------------------------------------------------ */
  /* Small radii only. Instruments have machined corners, not pillows. */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --hairline: 1px;

  /* Control heights meet the 44px touch target on coarse pointers (see the
     pointer query at the end of this file). */
  --control-height-sm: 32px;
  --control-height: 38px;

  --sidebar-width: 300px;
  /* Width of the log's timestamp column; hint blocks indent by exactly this so
     everything after the time lines up in one column. */
  --log-time-width: 6.5rem;
  --log-pane-height: 260px;

  /* --- light palette ---------------------------------------------------- */
  --paper: #f4f6f8; /* app ground — cool, not cream */
  --surface: #ffffff; /* panels */
  --surface-sunken: #eef1f5; /* log viewport, readout wells */
  --surface-raised: #ffffff;

  --text: #111820;
  --text-muted: #5b6775;
  --text-faint: #8a97a6;
  --text-on-accent: #ffffff;

  --border: #dbe1e9;
  --border-strong: #c2ccd8;

  --accent: #1b5fcc; /* descendant of the CVI blue */
  --accent-hover: #1750ad;
  --accent-soft: #e8f0fd;
  --accent-border: #b7d0f5;

  /* Direction of travel on the bus. These are semantic, not decorative. */
  --tx: #a44a17; /* PC --> Sensor */
  --tx-soft: #fbeee4;
  --rx: #0c7350; /* Sensor --> PC */
  --rx-soft: #e3f4ed;

  --ok: #0c7350;
  --ok-soft: #e3f4ed;
  --ok-border: #a9dcc8;

  --warn: #8a5a00;
  --warn-soft: #fdf3e0;
  --warn-border: #ecd39a;

  --danger: #b3261e;
  --danger-soft: #fdeceb;
  --danger-border: #f2bdb9;

  --info-soft: #e8f0fd;
  --info-border: #b7d0f5;

  --focus-ring: 0 0 0 3px rgb(27 95 204 / 0.32);
  --shadow-panel: 0 1px 2px rgb(16 24 40 / 0.04);
  --shadow-pop: 0 12px 32px rgb(16 24 40 / 0.16);
  --scrim: rgb(17 24 32 / 0.45);

  /* Chart series — distinguishable in both themes and for the common
     colour-vision deficiencies (varied lightness, not just hue). */
  --series-1: #1b5fcc;
  --series-2: #a44a17;
  --series-3: #0c7350;
  --series-4: #7a3ea8;
  --series-5: #b3261e;
  --series-6: #0f6f86;
}

/* --- dark: system default (no explicit choice stamped) ------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0d1117;
    --surface: #151b24;
    --surface-sunken: #0f151d;
    --surface-raised: #1b2330;

    --text: #e6ecf3;
    --text-muted: #98a5b6;
    --text-faint: #6c7a8c;
    --text-on-accent: #06111f;

    --border: #253040;
    --border-strong: #35435a;

    --accent: #6aa5ff;
    --accent-hover: #86b7ff;
    --accent-soft: #14243c;
    --accent-border: #27436e;

    --tx: #e59a5e;
    --tx-soft: #2a1d12;
    --rx: #4cc79a;
    --rx-soft: #10261f;

    --ok: #4cc79a;
    --ok-soft: #10261f;
    --ok-border: #1f4c3c;

    --warn: #e0b050;
    --warn-soft: #2a2313;
    --warn-border: #4f4222;

    --danger: #ff7a6d;
    --danger-soft: #2d1614;
    --danger-border: #5c2b26;

    --info-soft: #14243c;
    --info-border: #27436e;

    --focus-ring: 0 0 0 3px rgb(106 165 255 / 0.4);
    --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.55);
    --scrim: rgb(3 7 12 / 0.66);

    --series-1: #6aa5ff;
    --series-2: #e59a5e;
    --series-3: #4cc79a;
    --series-4: #c08cf0;
    --series-5: #ff7a6d;
    --series-6: #4fc2dd;
  }
}

/* --- dark: explicit toggle (wins over the OS preference) ---------------- */
:root[data-theme='dark'] {
  --paper: #0d1117;
  --surface: #151b24;
  --surface-sunken: #0f151d;
  --surface-raised: #1b2330;

  --text: #e6ecf3;
  --text-muted: #98a5b6;
  --text-faint: #6c7a8c;
  --text-on-accent: #06111f;

  --border: #253040;
  --border-strong: #35435a;

  --accent: #6aa5ff;
  --accent-hover: #86b7ff;
  --accent-soft: #14243c;
  --accent-border: #27436e;

  --tx: #e59a5e;
  --tx-soft: #2a1d12;
  --rx: #4cc79a;
  --rx-soft: #10261f;

  --ok: #4cc79a;
  --ok-soft: #10261f;
  --ok-border: #1f4c3c;

  --warn: #e0b050;
  --warn-soft: #2a2313;
  --warn-border: #4f4222;

  --danger: #ff7a6d;
  --danger-soft: #2d1614;
  --danger-border: #5c2b26;

  --info-soft: #14243c;
  --info-border: #27436e;

  --focus-ring: 0 0 0 3px rgb(106 165 255 / 0.4);
  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.55);
  --scrim: rgb(3 7 12 / 0.66);

  --series-1: #6aa5ff;
  --series-2: #e59a5e;
  --series-3: #4cc79a;
  --series-4: #c08cf0;
  --series-5: #ff7a6d;
  --series-6: #4fc2dd;
}

/* Full-size touch targets. Keyed off BOTH a coarse pointer and a narrow
   viewport: pointer media is not always reported (and is not emulated when a
   desktop browser is merely resized), so width is the reliable second signal. */
@media (pointer: coarse) {
  :root {
    --control-height-sm: 40px;
    --control-height: 46px;
  }
}

@media (max-width: 900px) {
  :root {
    --control-height-sm: 40px;
    --control-height: 46px;
  }
}