/*
  tokens.css
  ─────────────────────────────────────────────────────────────────────────────
  Mimotica design tokens — single source of truth for all surfaces.

  Adapted from Mimotica/communication_kit @ shared/styles/tokens.css,
  proprietary (Mimotica). Import IMP-20260810-communication-kit-brand-tokens
  — see prompts/importcontainer/LEDGER.md. Copied verbatim; background
  image paths below are adjusted to this repo's asset layout.

  THIS COPY: identical to ../../site/styles/tokens.css, duplicated here
  on purpose. console/index.html previously linked ../site/styles/tokens.css,
  but deploy/deploy.sh rsyncs console/ into its OWN docroot
  (/var/www/console-mimotica-io/html) — site/ never lands there, so every
  token below was undefined in production (confirmed: the "stylesheet"
  request 404'd, silently swallowed into a 200 text/html body by the SPA
  fallback, and the live console rendered with no background, invisible
  inputs, unstyled buttons). Two self-contained docroots, not a shared
  styles/ mount, matches deploy.sh's existing model (site/ and console/
  rsync independently) — so this file is duplicated, not symlinked.
  Keep both copies in sync by hand if tokens change; there is no build
  step in this repo to dedupe them automatically.
  ─────────────────────────────────────────────────────────────────────────────
*/

:root {
  /* ── Text & surface ─────────────────────────────────────────────────── */
  /* Type scale (2026-09-22): eight sizes, h1 > h2 > h3, floor 11 px. Every font-size in console.css outside the
     login block uses one of these (tests/type_scale.test.mjs). */
  --fs-1: 11px;  /* tiny: pills, eyebrows, table heads, mono meta */
  --fs-2: 12px;  /* small body, buttons, tables, callouts */
  --fs-3: 13px;  /* transcript body, nav, composer, dialog copy */
  --fs-4: 14px;  /* base body */
  --fs-5: 17px;  /* h3, transcript h1 */
  --fs-6: 22px;  /* h2: section and screen headings */
  --fs-7: 28px;  /* h1: page head, metric numbers */
  --fs-8: 36px;  /* display: the Studio and welcome heroes */
  /* Data marks (traces, bars, heatmap cells) wear the validated chart palette; UI accents keep --teal.
     charts.js SERIES / SEQUENTIAL must equal these (tests/type_scale.test.mjs). */
  --chart-1: #1b96a8; --chart-2: #d46a45; --chart-3: #3b6fc0; --chart-4: #b8386a;
  --seq-1: #7fb9c3; --seq-2: #4f9fac; --seq-3: #2f8a97; --seq-4: #237380; --seq-5: #1a5c67; --seq-6: #12444d;
  --ink:          #0c0e10;
  --muted:        #5f6872;
  --line:         rgba(12, 14, 16, 0.12);
  --panel:        rgba(255, 255, 255, 0.82);
  --panel-strong: rgba(255, 255, 255, 0.92);

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow:       0 18px 48px rgba(16, 24, 32, 0.14);
  --shadow-sm:    0 6px  20px rgba(16, 24, 32, 0.08);

  /* ── Brand palette ───────────────────────────────────────────────────── */
  --navy:   #102a4b;
  --teal:   #4f8088;
  --coral:  #c57b61;
  --wine:   #7a2138;
  --cream:  #f3efe7;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --radius:      24px;
  --radius-sm:   16px;
  --radius-pill: 999px;

  /* ── Backgrounds — NOT imported this pass. The source tokens.css defines
     --bg-cover/--bg-bottom/--bg-topright/--bg-left pointing at
     shared/assets/backgrounds/*.webp; those image files were assessed
     reference-only and not copied (see the assessment for this import),
     so no --bg-* variable is defined here. Add them, with the actual
     .webp files, only when a real page needs one — a variable pointing
     at a file that does not exist is worse than no variable. */

  /* ── Console additions (2026-09-20, Mimotica Studio shell) ───────────────
     Derived from the brand palette above with color-mix, so no new hex
     enters the system; the terminal/agent tokens are the ones
     docs/design/CONSOLE_AGENT_AND_FLEET.md §5 names. Proposed upstream to
     communication_kit/shared/styles/tokens.css. Keep BOTH copies of this
     file identical (see the header). */
  --font-sans:       Inter, "Segoe UI", Arial, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", SFMono-Regular, Consolas, monospace;
  --bg:              color-mix(in srgb, var(--cream) 42%, #fff);
  --surface:         #fff;
  --soft:            color-mix(in srgb, var(--cream) 22%, #fff);
  --tint:            color-mix(in srgb, var(--teal) 10%, #fff);
  --tint-strong:     color-mix(in srgb, var(--teal) 20%, #fff);
  --teal-deep:       color-mix(in srgb, var(--teal) 72%, var(--navy));
  --coral-tint:      color-mix(in srgb, var(--coral) 14%, #fff);
  --wine-tint:       color-mix(in srgb, var(--wine) 10%, #fff);
  --navy-tint:       color-mix(in srgb, var(--navy) 8%, #fff);
  --terminal-bg:     var(--ink);
  --terminal-fg:     var(--cream);
  --terminal-accent: var(--teal);
  --terminal-warn:   var(--coral);
  --terminal-danger: var(--wine);
  --radius-xs:       10px;
}