/* =============================================================================
 *  THEME TOKEN LAYER ,  the only file that knows what a colour IS.
 * ===========================================================================
 *
 *  Loaded once, before the generated per-theme layer. It defines no theme: it
 *  defines the vocabulary every theme speaks, and it derives that vocabulary from
 *  the handful of raw values a theme actually chooses.
 *
 *  Two tiers:
 *
 *    1. PALETTE DERIVATION. Custom properties the whole stylesheet reads , 
 *       --surface, --border, --line, --ring, --accent-h ,  in terms of the raw
 *       values in themes/themes.json. Adding a theme therefore cannot get one of
 *       these wrong: they are computed, not restated.
 *
 *    2. COMPONENT TOKENS. `--ctl-bg`, `--primary-hover-bg`, `--glass-blur`, and
 *       so on. The defaults below are noir's, because noir is the theme that
 *       applies when data-skin is empty. Each of them is a single value the
 *       stylesheet reads in place of a colour that used to be hardcoded in the
 *       rule ,  which is why adding a theme no longer means editing the rule.
 *
 *  A theme overrides a component token by naming it in its `components` block.
 *  It names only the ones that differ; the rest are already right.
 *
 *  GENERATED FILES NEXT DOOR
 *    css/themes/themes.css  is written by scripts/build-themes.mjs. Do not edit
 *    it. Edit themes/themes.json and run the build.
 * =========================================================================== */


/* =============================================================================
 *  1. PALETTE DERIVATION
 * =========================================================================== */

:root{
  /* ---- the surface ramp ------------------------------------------------
     --t-panel is the theme's base panel colour; it is what --panel, --panel2,
     --panel3 and --paper all restate so older rules keep working. */
  --panel:var(--t-panel);
  --panel2:var(--t-panel2);
  --panel3:var(--t-panel3);
  --paper:var(--t-panel);
  --surface:var(--t-surface);
  --surface-2:var(--t-surface2);
  --surface-3:var(--t-surface3);
  --surface-4:var(--t-surface4, var(--t-panel3));

  /* ---- text ------------------------------------------------------------
     Two names for the same idea because the stylesheet grew two conventions:
     --fg/--muted are the CSS custom properties, --ink/--soft the raw colours
     the theme declares. Kept in step here, never anywhere else. */
  --fg:var(--t-ink);
  --muted:var(--t-soft);
  --ink:var(--t-ink);
  --soft:var(--t-soft);
  --dim:var(--t-dim);

  /* ---- borders ---------------------------------------------------------
     Four weights off ONE colour. This is the single highest-value derivation
     in the file: the app used to restate border colours per skin and per
     component, and every restatement was a chance to leave a dark-theme value
     behind on a light page. `color-mix` inverts correctly, so one colour buys
     all four in every theme. */
  --border:var(--t-border);
  --border-s:var(--t-border-soft);
  --border-strong:var(--t-border-strong);
  --hairline:var(--t-hairline);
  --line:var(--t-line);
  --line2:var(--t-line2);

  /* ---- accent aliases --------------------------------------------------
     --accent2/-3 predate --accent-hover and are the two directions a gradient
     can run. Derived so a theme never has to name a colour the gradient would
     muddy, which is the bug the comment at the old .btn.primary describes. */
  --accent:var(--t-accent);
  --accent-h:var(--t-accent-hover);
  --accent2:var(--t-accent-deep, var(--t-accent-hover));
  --accent3:var(--t-accent-soft, var(--t-accent));
  --accent-ink:var(--t-accent-ink);
  --accent-glow:color-mix(in srgb,var(--t-accent) 45%,transparent);

  /* ---- status ---------------------------------------------------------- */
  --ok:var(--t-ok);
  --warn:var(--t-warn);
  --err:var(--t-err);
  --err2:var(--t-err-deep, var(--t-err));
  --warn2:var(--t-warn-deep, var(--t-warn));
  --focus:var(--t-focus, var(--t-accent-hover));

  /* ---- backgrounds ----------------------------------------------------- */
  --bg:var(--t-bg);
  --viewer-bg:var(--t-viewer-bg, var(--t-bg));

  /* ---- type ------------------------------------------------------------
     Optional: a theme that wants Fraunces back in midnight says so here rather
     than in a stylesheet rule. */
  --serif:var(--t-serif, 'Fraunces',Georgia,serif);
  --sans:var(--t-sans, 'Space Grotesk',sans-serif);
  --mono:var(--t-mono, 'Spline Sans Mono',ui-monospace,monospace);
  --read:var(--t-read, 'Source Serif 4',Georgia,serif);

  /* ---- focus ring ------------------------------------------------------
     A colour-mix on --accent-hover at two weights. Noir's own was
     rgba(255,122,92,.34)/.22; anything the theme declares arrives through
     --t-accent-hover instead. */
  --ring:0 0 0 3px color-mix(in srgb,var(--t-accent-hover) 66%,transparent);
  --ring-soft:0 0 0 2px color-mix(in srgb,var(--t-accent-hover) 78%,transparent);

  /* ---- the one-value inner highlight -----------------------------------
     `inset 0 1px 0 rgba(255,255,255,.05)` appears in roughly twenty rules. It is
     the same gesture everywhere and it is the first thing to read as a cold grey
     ring on a warm theme, so it is one token the whole app takes. */
  --shadow-inset:inset 0 1px 0 var(--t-inset-hi);
}


/* =============================================================================
 *  2. COMPONENT TOKENS
 * ===========================================================================
 *
 *  NOT HERE ON PURPOSE.
 *
 *  The component vocabulary ,  `--ctl-bg`, `--primary-hover-bg`, `--glass-blur`
 *  and the rest ,  is defined by scripts/build-themes.mjs, which emits it into
 *  css/themes/themes.css. It is derived, not written: noir's values are the base,
 *  a light theme's are computed from `scheme: "light"`, and a theme's `components`
 *  block overrides whichever of those it needs to.
 *
 *  Keeping it in the generator rather than here is what keeps this file about
 *  colours and that file about components, and it means the two can never drift
 *  apart ,  there is only one place either is written.
 *
 *  What a component token IS, and what each one is for, is documented in the
 *  generator. What it resolves to for the theme you are looking at is in the
 *  generated file, which is the honest place to read it.
 */
  /* ---- glass chrome -----------------------------------------------------
     Toasts, dialogs, popovers, search, the palette panel: a translucent surface
     with a backdrop filter. `--t-glass-blur: none` is what makes a theme flat;
     every surface in this group follows. */
  --glass-bg:color-mix(in srgb,var(--surface) 82%,transparent);
  --glass-blur:saturate(180%) blur(20px);
  --glass-shadow:var(--shadow-lg);
  --glass-border:var(--border-s);

  /* ---- solid chrome ------------------------------------------------------
     vbar, tool-head, rail, composer, tool cards, diagram/exam panes. The header
     keeps more of its colour than the sub-bars did (72% against 55%), so it has
     its own pair. */
  --bar-bg:color-mix(in srgb,var(--surface) 55%,transparent);
  --bar-blur:saturate(160%) blur(14px);
  --bar-shadow:none;
  --bar-border:var(--border);
  --nav-bg:color-mix(in srgb,var(--surface) 72%,transparent);
  --nav-blur:saturate(180%) blur(20px);
  --nav-shadow:none;
  --nav-border:var(--border);

  /* ---- generic control ----------------------------------------------------
     Icon buttons, secondary buttons, chips, segmented controls, tool-head icon
     buttons. A theme decides whether these are FILLED (noir: surface-2) or
     OUTLINED (the light themes: transparent plus a border) by setting four
     tokens ,  not by restating three rules. */
  --ctl-bg:var(--surface-2);
  --ctl-border:var(--border);
  --ctl-fg:var(--muted);
  --ctl-shadow:var(--shadow-xs);
  --ctl-inset:inset 0 1px 0 rgba(255,255,255,.05);
  --ctl-hover-bg:var(--surface-3);
  --ctl-hover-border:var(--border-strong);
  --ctl-hover-fg:var(--fg);
  --ctl-hover-shadow:var(--shadow-sm);
  --ctl-hover-inset:inset 0 1px 0 rgba(255,255,255,.07);
  --ctl-active-bg:linear-gradient(180deg,var(--accent-h),var(--accent));
  --ctl-active-border:var(--accent);
  --ctl-active-fg:var(--accent-ink);
  --ctl-active-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -4px var(--accent-glow);
  --ctl-active-inset:inset 0 1px 0 rgba(255,255,255,.28);

  /* ---- primary button -----------------------------------------------------
     Flat versus gradient is the one real fork here. Noir gradients the accent
     and shadows it with --accent-glow; the light themes go flat because a
     gradient into a warm shadow was the thing the user disliked. Both are four
     tokens. */
  --primary-bg:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 92%,white 8%) 0%,
    var(--accent) 100%);
  --primary-border:color-mix(in srgb,var(--accent) 84%,black 16%);
  --primary-fg:var(--accent-ink);
  --primary-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 8px 20px -6px var(--accent-glow),
    var(--shadow-xs);
  --primary-inset:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.16);
  --primary-hover-bg:linear-gradient(180deg,
    var(--accent) 0%,
    color-mix(in srgb,var(--accent) 92%,black 8%) 100%);
  --primary-hover-border:color-mix(in srgb,var(--accent) 84%,black 16%);
  --primary-hover-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 12px 28px -6px var(--accent-glow),
    var(--shadow-sm);
  --primary-hover-inset:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.18);
  --primary-active-bg:var(--accent);
  --primary-active-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 4px 12px -4px var(--accent-glow);
  --primary-active-inset:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.22);

  /* ---- secondary button --------------------------------------------------- */
  --secondary-bg:var(--surface-2);
  --secondary-border:var(--border);
  --secondary-fg:var(--fg);
  --secondary-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-xs);
  --secondary-hover-bg:var(--surface-3);
  --secondary-hover-border:var(--border-strong);
  --secondary-hover-fg:var(--fg);
  --secondary-hover-shadow:inset 0 1px 0 rgba(255,255,255,.07), var(--shadow-sm);

  /* ---- danger -------------------------------------------------------------
     Already transparent in noir; only the hover needs a token, and it is the one
     place a theme changes the weight of the red tint. */
  --danger-bg:transparent;
  --danger-border:color-mix(in srgb,var(--err) 55%,var(--border));
  --danger-fg:var(--err);
  --danger-shadow:none;
  --danger-hover-bg:color-mix(in srgb,var(--err) 14%,var(--surface-2));
  --danger-hover-border:var(--err);
  --danger-hover-fg:var(--err);

  /* ---- inputs --------------------------------------------------------------
     A theme with a flat surface needs no token here at all. */
  --input-bg:var(--surface);
  --input-border:var(--border);
  --input-fg:var(--fg);
  --input-shadow:var(--shadow-inset);
  --input-focus-border:var(--accent);
  --input-focus-shadow:var(--ring-soft), var(--shadow-inset);

  /* ---- cards ---------------------------------------------------------------- */
  --card-bg:var(--surface);
  --card-border:var(--border);

  /* ---- chips ------------------------------------------------------------------
     Same four as --ctl-*, and the same filled-versus-outlined fork, which is
     why they are separate tokens and not an alias: the light themes outline the
     icon buttons and the chips in the same stroke, but the rules are not shared. */
  --chip-bg:var(--surface-2);
  --chip-border:var(--border);
  --chip-fg:var(--fg);
  --chip-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-xs);
  --chip-inset:inset 0 1px 0 rgba(255,255,255,.05);
  --chip-hover-bg:var(--surface-3);
  --chip-hover-border:var(--border-strong);
  --chip-hover-shadow:inset 0 1px 0 rgba(255,255,255,.07), var(--shadow-sm);
  --chip-hover-inset:inset 0 1px 0 rgba(255,255,255,.07);

  /* ---- badges ----------------------------------------------------------------- */
  --badge-bg:color-mix(in srgb,var(--accent) 10%,transparent);
  --badge-border:color-mix(in srgb,var(--accent) 32%,transparent);
  --badge-fg:var(--accent);

  /* ---- chat bubbles -------------------------------------------------------------- */
  --bubble-user-bg:linear-gradient(180deg,
    color-mix(in srgb,var(--surface-2) 90%,transparent),
    var(--surface));
  --bubble-user-border:var(--border-s);
  --bubble-user-shadow:var(--shadow-inset), 0 4px 14px -10px rgba(0,0,0,.5);
  --bubble-ai-border:var(--accent);

  /* ---- scrollbars ------------------------------------------------------------------
     The only component that is a raw colour rather than a mix: a scrollbar thumb
     is one shape in every theme, and the light themes need a warm brown where
     noir needs a warm white. */
  --scroll-thumb:var(--t-scroll-thumb, rgba(255,255,255,.08));
  --scroll-thumb-hover:var(--t-scroll-thumb-hover, rgba(255,255,255,.2));

  /* ---- segmented control -------------------------------------------------------------- */
  --seg-bg:transparent;
  --seg-fg:var(--soft);
  --seg-on-bg:var(--ink);
  --seg-on-fg:var(--paper);

  /* ---- icon-button danger state -------------------------------------------------------- */
  --ibtn-danger-border:color-mix(in srgb,var(--err) 55%,var(--border));
  --ibtn-danger-fg:var(--err);

  /* ---- icon-button disabled -------------------------------------------------------------- */
  --ibtn-disabled-opacity:.35;

  /* ---- tool cards -------------------------------------------------------------------------- */
  --tool-card-hover-bg:var(--surface-3);
  --tool-card-hover-border:color-mix(in srgb,var(--accent) 42%,var(--border));
  --tc-icon-bg:var(--surface-2);
  --tc-icon-border:var(--border);
  --tc-icon-hover-bg:var(--accent);
  --tc-icon-hover-border:var(--accent);
  --tc-icon-hover-fg:var(--accent-ink);
  --tc-icon-hover-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 6px 14px -4px color-mix(in srgb,var(--accent) 45%,transparent);
  --tc-icon-active-bg:linear-gradient(180deg,var(--accent-h),var(--accent));
  --tc-icon-active-border:var(--accent);
  --tc-icon-active-fg:var(--accent-ink);
  --tc-icon-active-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -4px var(--accent-glow);
  --tc-new-shadow:0 2px 6px -2px color-mix(in srgb,var(--accent) 45%,transparent);

  /* ---- rail buttons ------------------------------------------------------------------------- */
  --rail-btn-hover-bg:transparent;
  --rail-btn-hover-border:var(--border);
  --rail-btn-hover-fg:var(--ink);
  --rail-btn-on-bg:transparent;
  --rail-btn-on-fg:var(--accent);

  /* ---- home search / composer / model picker ------------------------------------------------ */
  --home-search-bg:color-mix(in srgb,var(--surface) 82%,transparent);
  --home-search-border:var(--border);
  --home-search-shadow:none;
  --home-search-focus-border:var(--accent);
  --home-search-focus-shadow:var(--ring-soft);
  --chat-in-bg:color-mix(in srgb,var(--surface) 96%,transparent);
  --chat-in-border:var(--border);
  --chat-in-shadow:none;
  --chat-in-focus-border:var(--accent);
  --chat-in-focus-shadow:var(--ring-soft);
  --ai-model-select-bg:var(--surface-2);
  --ai-model-select-border:var(--border-s);
  --ai-model-btn-bg:var(--surface-2);
  --ai-model-btn-border:var(--border-s);
  --ai-model-menu-shadow:var(--shadow-xl);

  /* ---- connection badge ---------------------------------------------------------------------- */
  --net-badge-bg:none;
  --net-badge-border:transparent;
  --net-badge-fg:var(--muted);
  --net-badge-hover-border:var(--accent);
  --net-badge-hover-fg:var(--accent);

  /* ---- notebook banner ----------------------------------------------------------------------- */
  --nb-banner-bg:color-mix(in srgb,var(--accent) 8%,var(--surface));
  --nb-banner-border:color-mix(in srgb,var(--accent) 30%,var(--border));
  --nb-banner-fg:var(--accent);

  /* ---- calendar ------------------------------------------------------------------------------ */
  --cal-cell-bg:var(--surface);
  --cal-dow-bg:var(--surface);
  --cal-cell-hover-bg:color-mix(in srgb,var(--accent) 8%,transparent);
  --cev-bg:transparent;
  --cev-fg:var(--ink);
  --cev-task-bg:color-mix(in srgb,var(--accent) 10%,transparent);
  --cev-task-border:color-mix(in srgb,var(--accent) 65%,transparent);
  --cev-red-bg:color-mix(in srgb,var(--err) 12%,transparent);
  --cev-red-border:color-mix(in srgb,var(--err) 70%,transparent);
  --cev-amber-bg:color-mix(in srgb,var(--warn) 14%,transparent);
  --cev-amber-border:color-mix(in srgb,var(--warn) 70%,transparent);
  --cev-green-bg:color-mix(in srgb,var(--ok) 12%,transparent);
  --cev-green-border:color-mix(in srgb,var(--ok) 65%,transparent);
  --up-item-urgent-bg:var(--surface);
  --up-item-urgent-border:var(--border);

  /* ---- whiteboard table editor ---------------------------------------------------------------- */
  --wb-tbl-editor-bg:var(--panel);
  --wb-tbl-editor-border:var(--accent);
  --wb-tbl-editor-shadow:0 12px 40px -6px rgba(20,15,5,.45);
  --wb-tbl-editor-th-bg:var(--surface-2);
  --wb-tbl-editor-th-fg:var(--soft);
  --wb-tbl-hdr-bg:color-mix(in srgb,var(--accent) 8%,transparent);
  --wb-tbl-editing-bg:color-mix(in srgb,var(--accent) 8%,transparent);
  --wb-tbl-rg-hover-bg:color-mix(in srgb,var(--accent) 8%,transparent);
  --row-plus-hover-bg:rgba(0,0,0,.05);
  --tbl-cell-menu-bg:var(--panel);
  --tbl-cell-menu-border:var(--line2);
  --tbl-cell-menu-shadow:0 8px 24px rgba(10,10,14,.5);
  --tbl-cell-menu-btn-hover-bg:color-mix(in srgb,var(--accent) 12%,transparent);
  --tbl-cell-menu-btn-hover-fg:var(--accent);

  /* ---- diagram legend / task timer ---------------------------------------------------------------- */
  --dg-legend-bg:var(--panel);
  --dg-legend-shadow:0 10px 32px rgba(10,10,14,.55);
  --ts-timer-bg:var(--panel);
  --ts-timer-shadow:0 10px 32px rgba(10,10,14,.55);

  /* ---- saved rows / notebook list rows ---------------------------------------------------------------- */
  --saved-row-border:var(--line);
  --lset-bg:transparent;

  /* ---- overlays ---------------------------------------------------------------------------------- */
  --cp-root-bg:color-mix(in srgb,var(--surface) 72%,transparent);
  --lumen-tip-shadow:0 12px 34px -14px color-mix(in srgb,var(--t-shadow-base, rgba(0,0,0,.65)) 69%);

  /* ---- embedded date/time pickers ------------------------------------------------------------------- */
  --date-picker-filter:none;
}