:root {
  /* Whatic palette — ported from prototype whatic.jsx */
  --bg:           #16161a;
  --bg-2:         #1c1c20;
  --bg-3:         #24242a;
  --bg-4:         #2c2c33;
  --bg-5:         #34343b;

  /* ── RGB CHANNELS — single source for every alpha variant ──────────────
     Alpha tints reference these as rgba(var(--x-rgb), .4) so they track the
     themed hue. A future light theme redefines the channels (and the overlay
     channel flips toward black); everything tinted from them follows. */
  --accent-rgb:   185, 164, 236;   /* = --accent  #b9a4ec */
  --ok-rgb:       143, 199, 164;   /* = --ok      #8fc7a4 */
  --warn-rgb:     216, 178, 119;   /* = --warn    #d8b277 */
  --err-rgb:      216, 138, 131;   /* = --err     #d88a83 */
  --ink-rgb:      216, 212, 204;   /* = --ink     #d8d4cc */
  --overlay-rgb:  255, 255, 255;   /* hairlines / hover washes — flips on light */
  --shadow-rgb:   0, 0, 0;         /* elevation + scrim base */

  --line:         rgba(var(--overlay-rgb), 0.05);
  --line-2:       rgba(var(--overlay-rgb), 0.09);
  --overlay:      rgba(var(--overlay-rgb), 0.05);  /* hover wash on controls */
  --scrim:        rgba(var(--shadow-rgb), 0.58);   /* modal / sheet backdrop */

  --ink:          #d8d4cc;
  --ink-h:        #f0ece4;
  --ink-2:        #918e89;
  --ink-3:        #5d5b58;

  --accent:       #b9a4ec;
  --accent-h:     #cdb9ff;
  --accent-soft:  rgba(var(--accent-rgb), 0.13);
  --accent-glow:  rgba(var(--accent-rgb), 0.35);

  --warn:         #d8b277;
  --ok:           #8fc7a4;
  --err:          #d88a83;

  /* Canonical additions from the design system (colors_and_type.css). The
     tokens above are byte-identical to the source of truth; everything below
     was missing from the harness and is added here verbatim. */

  /* ── Accent / semantic completions ──────────────────────────────────── */
  --accent-2:     #8d75c8;                 /* gradient pair (darker)        */
  --accent-on:    #16161a;                 /* text/icon ON solid accent     */
  --accent-d:     #221c30;                 /* dark-purple text ON accent (mobile) */
  --code-bg:      #26262c;                 /* inline code / formula token bg */
  --paper:        #fff;                    /* rendered SVG/diagram backing surface */

  /* ── Document / faux-PDF surface (DatasheetPage) ────────────────────── */
  --ds-page-dark:  #1a1814;                /* datasheet page — dark reading mode */
  --ds-page-light: #fafaf7;                /* datasheet page — paper mode        */
  --locator:       #e53935;                /* citation bbox highlight            */
  --locator-rgb:   229, 57, 53;
  --ok-2:         #9bd4a8;                 /* brighter ok (schematic nets)  */
  --ok-soft:      rgba(var(--ok-rgb), 0.15);
  --warn-soft:    rgba(var(--warn-rgb), 0.10);
  --err-soft:     rgba(var(--err-rgb), 0.12);

  /* ── Deep surfaces (marketing / full-bleed) ─────────────────────────── */
  --bg-deep:      #0e0e11;
  --bg-deep-2:    #16161a;
  --bg-deep-3:    #1c1c20;
  --bg-deep-4:    #24242a;

  /* Backwards-compat aliases for components not yet ported. */
  --surface:      var(--bg-2);
  --surface2:     var(--bg-3);
  --surface-hi:   var(--bg-4);
  --canvas:       var(--bg);
  --border:       var(--line-2);
  --border-soft:  var(--line);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-dim:       var(--ink-3);
  --red:          var(--err);   /* error text used var(--red, #ef4444) fallbacks */
  --accent2:      var(--accent-h);
  --on-accent:    var(--bg);
  --q-red:        var(--err);
  --q-amber:      var(--warn);
  --q-green:      var(--ok);
  --q-blue:       #8ab4d8;
  --q-purple:     #c4a4d8;
  --q-teal:       #7ec4c2;
  --q-orange:     #d8a67e;

  /* TODO: Do we need this fonts to be installed on system? If yes, we need to include them to bundle and make a links on them to load them  */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* Canonical aliases so design-system component CSS (which references
     --font-*) resolves against the harness's existing family tokens. */
  --font-sans:  var(--sans);
  --font-mono:  var(--mono);
  --font-serif: var(--serif);

  /* ── TYPE SCALE (px) — single source of truth for font sizes ─────────── */
  --t-display:   68px;   /* marketing hero (serif)        */
  --t-h1:        44px;   /* section headline (serif)      */
  --t-h2:        36px;   /* in-app page title (sans)      */
  --t-h3:        22px;   /* feature / card title (sans)   */
  --t-lede:      19px;   /* hero sub-paragraph            */
  --t-body-lg:   16px;
  --t-body:      14.5px; /* default body                  */
  --t-ui:        13px;   /* buttons, nav, controls        */
  --t-secondary: 12.5px; /* dense rows: msg-head, tool rows, search, toast */
  --t-caption:   11.5px; /* sub-labels: convo-meta, mono targets, chips    */
  --t-label:     11px;   /* mono eyebrows, tags           */
  --t-micro:     10.5px; /* mono captions, kbd, pin nums  */

  /* ── GLOBAL TYPE TONE ────────────────────────────────────────────────── */
  --tracking-tight:  -0.025em;  /* large serif display    */
  --tracking-ui:     -0.005em;  /* body / UI default      */
  --tracking-mono:    0.06em;   /* mono eyebrows / labels */

  /* ── RADII ───────────────────────────────────────────────────────────── */
  --r-xs:   4px;    /* tags, num tints, kbd       */
  --r-sm:   8px;    /* buttons, chips, icon btns  */
  --r-md:   10px;   /* cards, inputs, tool rows   */
  --r-lg:   14px;   /* panels, composer, modals   */
  --r-xl:   16px;   /* hero preview, large cards  */
  --r-pill: 100px;  /* status pills, followups    */

  /* ── SPACING (px) — loosely 4px-based ────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* ── ELEVATION — surface fill carries depth; shadows are for overlays ── */
  --sh-card:    0 1px 0 rgba(var(--shadow-rgb), 0.2);
  --sh-pop:     0 16px 50px rgba(var(--shadow-rgb), 0.55), 0 0 0 1px var(--line-2);
  --sh-modal:   0 30px 80px rgba(var(--shadow-rgb), 0.6), 0 0 0 1px var(--line-2);
  --sh-drawer:  -16px 0 50px rgba(var(--shadow-rgb), 0.5);
  --sh-hero:    0 20px 60px rgba(var(--shadow-rgb), 0.4), 0 0 0 1px rgba(var(--accent-rgb), 0.06);
  --ring-focus: 0 0 0 1px var(--accent-glow);

  /* ── MOTION ──────────────────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  0.12s;  /* hovers, tints       */
  --dur:       0.15s;  /* default             */
  --dur-slow:  0.25s;  /* drawers, modals     */
  --dur-gauge: 0.5s;   /* margin-gauge motion */

  --panel-scale: 1;
}

/* ── MOBILE TYPE LAYER ──────────────────────────────────────────────────────
   The single lever for mobile sizing. The canonical mobile kit (ui_kits/mobile)
   deliberately runs a larger type scale than desktop — bigger body prose, more
   touch-comfortable controls, slightly larger mono labels. Overriding the scale
   tokens here means every component that reads --t-* grows on phones from ONE
   place, instead of a per-component @media block in every file.
   (Palette is intentionally NOT shifted at this breakpoint — the kit scopes its
   ink/line tweaks to the mobile surface, and the deltas are sub-perceptible.) */
@media (max-width: 800px) {
  :root {
    --t-body:      16px;   /* 14.5 → 16  body prose, composer */
    --t-body-lg:   17px;   /* 16   → 17                       */
    --t-ui:        15px;   /* 13   → 15  controls, followups  */
    --t-secondary: 14px;   /* 12.5 → 14  dense rows           */
    --t-caption:   13px;   /* 11.5 → 13  sub-labels           */
    --t-label:     12px;   /* 11   → 12  mono tags            */
    --t-micro:     11px;   /* 10.5 → 11  mono captions        */
  }
}

/* Shared chrome for the statically generated pages (blog, tool).
 * Concatenated after the canonical frontend/harness/src/styles/tokens.css
 * into dist/site.css at build time, so the tokens have exactly one source
 * and no template carries its own copy. Component rules only -- never
 * declare a token here.
 */
* { box-sizing: border-box; }
  html { background: var(--bg); }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--font-sans); line-height: 1.65; font-size: 16px;
    -webkit-font-smoothing: antialiased;
  }

  /* ── shared chrome: the app's top bar, ported from App.vue + global.css ── */
  .site-bar {
    background: var(--bg); border-bottom: 1px solid var(--line);
    display: flex; align-items: center; padding: 0 18px; gap: 14px; height: 44px;
    position: sticky; top: 0; z-index: 60;
  }
  .site-bar-brand {
    display: flex; align-items: center; gap: var(--s-2);
    flex-shrink: 0; color: var(--ink); text-decoration: none;
  }
  .site-bar-brand:hover { color: var(--ink); }
  .site-bar-mk { flex: none; }
  .site-bar-name {
    font-family: var(--mono); font-size: 11.5px;
    color: var(--ink-2); letter-spacing: 0.4px;
  }
  .site-bar-beta {
    font-family: var(--font-mono); font-size: 10px; color: var(--accent);
    background: var(--accent-soft); border-radius: var(--r-xs); padding: 1px 5px; line-height: 1.4;
  }
  .site-bar-sep { width: 1px; height: 18px; background: var(--line); flex-shrink: 0; }
  .site-bar-nav { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
  /* Ported from global.css .nav-btn — through its tokens, not their resolved
     values. --t-ui is 13px on desktop but 15px under the mobile type layer in
     tokens.css, so a literal 13px here made the nav a size smaller than the
     app's on every phone. */
  .site-bar-nav a {
    padding: var(--s-1) 10px; color: var(--ink-2); font-size: var(--t-ui);
    border-radius: 3px; white-space: nowrap; text-decoration: none;
  }
  .site-bar-nav a:hover { background: var(--overlay); color: var(--ink-h); }
  .site-bar-nav a.active { color: var(--ink-h); font-weight: 600; }

  /* ── shared chrome: the welcome page's footer ──
     Values ported verbatim from Welcome.vue, including its tokens rather than
     the literals they resolve to — --t-micro and --s-* shift under the mobile
     type layer in tokens.css, so copying the resolved numbers would have made
     the footer subtly wrong on phones. Order: notes, contact, columns. */
  .site-foot { max-width: 1160px; margin: 0 auto; padding: 0 20px 80px; }
  .site-foot .note {
    margin: 0; font-size: var(--t-micro); line-height: 1.5; color: var(--ink-3); max-width: 74ch;
  }
  .site-foot .note + .note { margin-top: var(--s-2); }
  .site-foot .contact {
    margin-top: var(--s-4); padding-top: 18px; border-top: 1px solid var(--line);
    display: flex; align-items: baseline; gap: var(--s-2);
    font-size: 13px; color: var(--ink-2);
  }
  .site-foot .contact a { color: var(--accent); text-decoration: none; }
  .site-foot .contact a:hover { color: var(--accent-h); }
  .site-foot .cols {
    display: flex; gap: 64px; padding: 36px 0 4px;
    margin-top: var(--s-4); border-top: 1px solid var(--line);
  }
  .site-foot .h {
    font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3);
    letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px;
  }
  .site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
  .site-foot ul a { color: var(--ink); font-size: 14.5px; text-decoration: none; }
  .site-foot ul a:hover { color: var(--accent-h); }
  /* Welcome.vue's own footer breakpoint is 800px, not the 640px this page uses
     for its layout — matching it keeps the two footers identical on tablets. */
  /* 800px is the app's own top-bar breakpoint (App.vue) as well as Welcome.vue's
     footer one. The bar rules used to sit in the 640px block below, which left
     the nav at desktop metrics across the whole 641–800px band. */
  @media (max-width: 800px) {
    .site-bar { height: 54px; padding: 0 var(--s-3); gap: var(--s-2); }
    .site-bar-name { display: none; }
    .site-bar-nav a { padding: 6px 9px; border-radius: var(--r-sm); }
    .site-bar-nav a.active { background: var(--bg-3); }
    .site-foot .cols { gap: 28px; padding: 28px 0 4px; }
    .site-foot .h { margin-bottom: 14px; }
    .site-foot ul { gap: 13px; }
    .site-foot ul a { font-size: 14px; }
  }

  @media (max-width: 640px) {
    .site-foot { padding: 0 18px 64px; }
  }

  /* App.vue drops the β and the separator once the bar is truly cramped. */
  @media (max-width: 380px) {
    .site-bar { padding: 0 var(--s-2); gap: var(--s-1); }
    .site-bar-sep,
    .site-bar-beta { display: none; }
  }