/* Osiris design tokens — the one design system (owner, 2026-10-02: "Direction Lab pills everywhere").
 *
 * Every colour here is DERIVED from the theme anchors that applyTheme() writes on :root
 * (--bg --sf --pn --bd --ac --a2 --a3 --tx --td --tb, plus the contrast-lifted --td-ui), so every theme (theme-tokens.js) and
 * each one's day/night twin recolour every control live.
 *
 * The one active state (owner, round 3, 2026-10-06): BLACK on light themes, a LIGHTER fill on dark themes.
 * applyTheme() picks it per theme from the panel's luminance and writes --o-active-bg / --o-active-fg /
 * --o-active-ring inline on :root (dark panel → the theme's brightest text --tb as the fill, its canvas --bg as ink);
 * the rules below are only the first-paint fallback (html.light = a light theme).
 *
 * Consumers: osiris-controls.css (.o-pill / .o-seg / .o-menu / .o-tab / .o-panel) and osiris-legacy-skin.css
 * (the legacy button families mapped onto the same look). Loaded before both.
 */
:root{
  /* Sun / Moon / planet glyphs are text, never colour emoji (the glyph audit also writes U+FE0E at the source). */
  font-variant-emoji:text;
  /* ── type ─────────────────────────────────────────────────────── sans-serif, never the monospace --text-font */
  --o-font:var(--ui-font);
  --o-fs-xs:var(--fs-caption);
  --o-fs-sm:11px;
  --o-fs:12px;
  --o-fs-lg:13px;
  --o-fw:600;
  --o-fw-active:700;
  --o-tracking:.02em;

  /* ── colour (roles → theme anchors) ───────────────────────────── */
  --o-ink:var(--tx,#d6d8ea);                       /* control text */
  --o-ink-strong:var(--tb,#eef0fb);                /* hover / emphasised text */
  --o-ink-muted:var(--td-ui,var(--td,#aebbd2));    /* secondary text, ghost controls (contrast-lifted) */
  --o-surface:var(--pn,#13111f);                   /* control fill */
  --o-surface-sunk:var(--sf,#0e0c1c);              /* fields, wells */
  --o-canvas:var(--bg,#070611);
  --o-line:var(--bd,#2a2348);                      /* thin light border */
  --o-line-hover:var(--ac,#9d8cff);
  --o-accent:var(--ac,#9d8cff);
  --o-focus:var(--a2,#4fd8e8);
  --o-wash:color-mix(in srgb,var(--tx,#d6d8ea) 8%,transparent);   /* hover wash on transparent controls */
  --o-danger:#e05242;
  /* the one active state — dark themes: a light fill (theme --tb) with dark ink; light themes: black + white ink */
  --o-active-bg:var(--tb,#eef0fb);
  --o-active-fg:var(--bg,#070611);
  --o-active-ink:var(--o-active-fg);                /* legacy name, same value */
  --o-active-ring:inset 0 0 0 1px rgba(0,0,0,.22);
  --o-active-lift:0 0 #0000;                       /* no lift (owner: border highlight only); stays a valid shadow-list item */

  /* ── shape / space ────────────────────────────────────────────── */
  --o-radius-sm:6px;
  --o-radius:8px;
  --o-radius-lg:12px;
  --o-radius-xl:14px;
  --o-space-1:2px;
  --o-space-2:4px;
  --o-space-3:6px;
  --o-space-4:8px;
  --o-space-5:12px;
  --o-space-6:16px;
  --o-h-xs:20px;      /* in-table controls */
  --o-h-sm:24px;      /* dense bars (tab rows, chips) */
  --o-h:28px;         /* default control */
  --o-h-touch:34px;   /* phone */

  /* ── depth / motion ───────────────────────────────────────────── */
  --o-shadow-pop:0 10px 28px rgba(0,0,0,.45);
  --o-ease:cubic-bezier(.2,.7,.2,1);
  --o-dur:.12s;
}
html.light{
  --o-active-bg:#000;
  --o-active-fg:#fff;
  --o-active-ring:inset 0 0 0 1px rgba(255,255,255,.3);
}
@media (max-width:700px){
  :root{--o-h:var(--o-h-touch)}
}