/* shell-tokens.css — the single token vocabulary for every surface.
 *
 * WHY THIS FILE EXISTS
 * Four token vocabularies had grown up independently (--of-*, --quiet-*,
 * --welcome-*, and CIC's --bg/--ink/--line) carrying THE SAME palette values.
 * Worse, /cic/task-chat.css is loaded by all three shells but every one of the
 * 14 tokens it consumes was defined only in CIC's stylesheet — so the chat
 * drawer rendered unstyled on JSLC and Musix.
 *
 * The JSLC palette is the reference (owner decision). These are aliases onto
 * it, not new colours: no value here is invented.
 *
 * RULE: a surface may not define its own palette. It consumes these tokens.
 * A module contributes an ACCENT and nothing else.
 */

:root {
  /* --- base palette: JSLC reference, light --- */
  --of-primary: #002eac;
  --of-primary-bright: #1646b8;
  /* Was #f7f3ea, a tan. The owner: "i dont like that tan color you keep using
   * as a neutral". Replaced with a cool near-white that sits with the blues
   * already in this palette - --of-paper-soft is #e9eef9 and --of-rule is
   * #8193bc, so the tan was the only warm value in its own base palette. */
  --of-paper: #f6f7fa;
  --of-paper-soft: #e9eef9;
  --of-ink: #111a2d;
  --of-ink-soft: #536078;
  --of-rule: #8193bc;
  --of-good: #16803d;
  --of-warn: #ff9d2f;
  --of-bad: #b62d35;
  /* CONTROL HEIGHT IS A POINTER QUESTION, NOT A TASTE ONE. 44px is the touch
   * target guideline, and it was applied unconditionally, so every button was
   * sized for a fingertip on a desktop where the pointer is a mouse - the owner:
   * "stop making buttons gratuitously large its so annoying". One token, two
   * values, chosen by what is actually pointing at the screen. Scattered magic
   * numbers are how this drifted; there is one number now. */
  --control-min-h: 1.9rem;


  /* --- semantic layer: what components actually consume --- */
  --ink: var(--of-ink);
  --muted: var(--of-ink-soft);
  --line: var(--of-rule);
  --line-strong: #536b9f;
  --accent: var(--of-primary);
  --accent-subtle: rgba(0, 46, 172, .1);
  --link: var(--of-primary);
  --status-info: var(--of-primary);
  /* The other three existed as CONSUMERS ONLY: --status-success, -warning and
   * -error are referenced 24 times across this repo and were DEFINED NOWHERE,
   * so every one ran on whatever fallback its call site happened to name. A
   * colour that silently does not exist is worse than a wrong one, because
   * nothing looks broken. The base palette already held the right values;
   * only the semantic mapping was missing, exactly as --status-info shows. */
  --status-success: var(--of-good);
  --status-warning: var(--of-warn);
  --status-error: var(--of-bad);
  /* Was rgba(247, 243, 234, .96) - the retired tan spelled as a literal, so
   * changing --of-paper left this surface behind. Derived now. */
  --surface-overlay: color-mix(in srgb, var(--of-paper) 96%, transparent);
  --surface-subtle: rgba(255, 255, 255, .55);
  --control-surface: rgba(255, 255, 255, .72);
  --field-surface: #fff;
  --overlay-scrim: rgba(4, 16, 46, .48);
  --shadow-drawer: 1.1rem 0 3rem rgba(4, 16, 46, .28);
  --version-strip-surface: rgba(105, 110, 118, .72);
  --version-strip-ink: #fff;
  --version-strip-border: rgba(255, 255, 255, .25);

  /* --- shell geometry: the taskbar is one height everywhere --- */
  /* 2.5rem is the JCOM bar's height (cic/topology/styles.css:706) and the
   * offset /cic/task-chat.css already hard-codes for its drawer (inset: 2.5rem).
   * It was 2.9rem here, which is why the Chat drawer sat behind the JSLC bar. */
  --shell-bar-height: 2.5rem;
  /* The right tab rail is position:fixed, so content does not flow around it
   * and must RESERVE its width or it slides underneath. CIC used this only
   * through inline fallbacks - it was defined in jslc/shell/public/styles.css
   * and nowhere the CIC pages could see - so the two surfaces agreed by
   * coincidence. jslc still overrides it responsively and that still wins. */
  --tab-width: 1.45rem;
  /* Follows --control-min-h so there is ONE control height, not two that
   * silently disagree. This was a fixed 2.75rem and it is what pinned the login
   * fields at 44px on a mouse while the other minimums had already come down. */
  --ui-control-height: 1.9rem;
  --ui-gap: .45rem;
  /* ADDED 2026-09-02: sibling of --ui-gap/--ui-control-height. The Mainframe
     design system uses it for the rule above a form section; the CIC login
     splash reproduces that form and needed the same value as a token rather
     than a literal. */
  --ui-section-space: .6rem;
  /* ADDED 2026-09-03: the PAGE face, as distinct from --bar-font-family, which
     is chrome-only Arial/Helvetica. This exact stack is duplicated verbatim in
     jslc/shell/public/styles.css, cic/topology/styles.css, legal.css and
     markets.css - four copies of one decision. */
  --ui-font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;

  /* --- taskbar skin: the JCOM bar's look, expressed as semantic tokens ---
   * Source of truth for every value: .migration/SKIN_jcom.md (file:line for
   * each). Consumed by shell-bar-skin.css. No value here is a new colour: the
   * chrome is --of-primary at 92%, the shadow is --of-ink at 18%, and every
   * divider/hover/outline is the ONE on-chrome foreground (--bar-fg) at an
   * alpha. --bar-fg is white by design: it sits on cobalt in both themes, so
   * it is deliberately theme-invariant (see the dark blocks below).
   *
   * Type is the acceptance test: family, size, weight, tracking and CASE come
   * from these five tokens and nowhere else, so a label authored "Navigation"
   * and one authored "CHAT" render identically. */
  --bar-height: var(--shell-bar-height);
  --bar-fg: #fff;
  /* The build stamp goes amber when the page is out of date. Tokens rather
   * than literals because the skin is forbidden colour literals (tools/
   * test-shell.js: "skin must not own literal colors") - a rule I broke and
   * did not notice until I ran that suite. */
  --bar-warn-fg: #e0a72e;
  --bar-warn-fg-hover: #ffcf6b;
  --bar-bg: color-mix(in srgb, var(--of-primary) 92%, transparent);
  --bar-bg-solid: var(--of-primary);
  --bar-blur: blur(14px) saturate(125%);
  --bar-rule: 1px solid color-mix(in srgb, var(--bar-fg) 48%, transparent);
  --bar-shadow: 0 .25rem 1.2rem color-mix(in srgb, var(--of-ink) 18%, transparent);

  --bar-control-height: var(--bar-height);
  --bar-control-padding: .5rem .75rem;
  --bar-control-gap: 0;
  --bar-control-radius: 0;
  --bar-control-border: 0;
  --bar-control-divider: 1px solid color-mix(in srgb, var(--bar-fg) 25%, transparent);
  --bar-control-divider-strong: 1px solid color-mix(in srgb, var(--bar-fg) 35%, transparent);
  --bar-control-bg: transparent;
  --bar-control-bg-hover: color-mix(in srgb, var(--bar-fg) 16%, transparent);
  --bar-control-bg-active: color-mix(in srgb, var(--bar-fg) 24%, transparent);
  --bar-control-outline: 2px solid var(--bar-fg);
  --bar-control-outline-offset: -3px;

  --bar-font-family: Arial, Helvetica, sans-serif;
  --bar-font-size: .8333rem;
  --bar-font-weight: 400;
  --bar-line-height: 1;
  --bar-letter-spacing: .055em;
  --bar-text-transform: uppercase;

  --bar-motion: .16s ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --of-paper: #0b1324;
    --of-paper-soft: #18253e;
    --of-ink: #f3f6ff;
    --of-ink-soft: #b3bfd8;
    --of-rule: #465c8f;
    /* Semantic status on dark paper. The light values are tuned against a
     * near-white ground and lose contrast on #0b1324, so they are raised here
     * rather than inherited - the same reason --of-primary is raised below. */
    --of-good: #4ade80;
    --of-warn: #ffb454;
    --of-bad: #ff8189;
    /* ADDED 2026-09-02: --of-primary is a CHROME FILL, not a text colour.
       Used as text on --of-paper it measures 1.61:1, which is how the login
       splash came out unreadable. This is the same cobalt raised until it is
       legible on the dark paper; --accent re-aliases onto it so every
       surface follows without any of them owning a literal. */
    --of-primary-soft: #93b4ff;
    --accent: var(--of-primary-soft);
    /* --link did NOT follow --accent into dark, so `color: var(--link)`
       measured 1.61:1 on the dark paper - the exact defect the
       --of-primary-soft comment above describes, left live. */
    --link: var(--of-primary-soft);
    --accent-subtle: rgba(147, 180, 255, .16);
    --surface-overlay: rgba(11, 19, 36, .96);
    --surface-subtle: rgba(255, 255, 255, .06);
    --control-surface: rgba(255, 255, 255, .08);
    --field-surface: #0f1d37;
    --overlay-scrim: rgba(2, 8, 23, .6);
    --shadow-drawer: 1.1rem 0 3rem rgba(0, 0, 0, .5);
    /* Taskbar skin, dark: the bar itself is cobalt in both themes (JSLC's
     * dark theme keeps it, verified live), so --bar-bg/--bar-fg/dividers do
     * not change. Only the drop shadow is theme-variant: the light value is
     * ink at 18%, which vanishes on dark paper; use the drawer's dark shadow
     * colour, which this block already owns. */
    --bar-shadow: 0 .25rem 1.2rem rgba(0, 0, 0, .5);
  }
}

/* --- module accents: ONE source of truth ---
 * Previously duplicated across seven registry files that disagreed with each
 * other. A module declares its accent by id; the shell reads it from here.
 */
:root {
  --accent-hello-world: #e57922;
  --accent-the-1948-trail: #002eac;
  --accent-nakbatrail: #0d7a8a;
  --accent-whatsnew: #bb3e24;
  --accent-jslcommand-and-conquer: #7b2cbf;
  --accent-jslcommand-and-conquer-red-alert: #c9303e;
  --accent-jslcommand-fighters: #ef3d57;
  --accent-counterforce: #4bbf74;
  --accent-wwwd: #712f79;
  --accent-eretz-yisrael: #147d64;
  --accent-delyrical: #d98e3f;
  --accent-matrix-timeline: #1646b8;
  --accent-matrix-songstreams: #2b8a8f;
  --accent-forge-storyboarding: #a8501f;
  --accent-cic: #002eac;
}


/* Apps switch theme with :root[data-theme="dark"], not the media query.
 * Both are supported so the shell and its modules flip together. */
:root[data-theme="dark"] {
    --of-paper: #0b1324;
    --of-paper-soft: #18253e;
    --of-ink: #f3f6ff;
    --of-ink-soft: #b3bfd8;
    --of-rule: #465c8f;
    /* Semantic status on dark paper. The light values are tuned against a
     * near-white ground and lose contrast on #0b1324, so they are raised here
     * rather than inherited - the same reason --of-primary is raised below. */
    --of-good: #4ade80;
    --of-warn: #ffb454;
    --of-bad: #ff8189;
    /* ADDED 2026-09-02: --of-primary is a CHROME FILL, not a text colour.
       Used as text on --of-paper it measures 1.61:1, which is how the login
       splash came out unreadable. This is the same cobalt raised until it is
       legible on the dark paper; --accent re-aliases onto it so every
       surface follows without any of them owning a literal. */
    --of-primary-soft: #93b4ff;
    --accent: var(--of-primary-soft);
    /* --link did NOT follow --accent into dark, so `color: var(--link)`
       measured 1.61:1 on the dark paper - the exact defect the
       --of-primary-soft comment above describes, left live. */
    --link: var(--of-primary-soft);
    --accent-subtle: rgba(147, 180, 255, .16);
    --surface-overlay: rgba(11, 19, 36, .96);
    --surface-subtle: rgba(255, 255, 255, .06);
    --control-surface: rgba(255, 255, 255, .08);
    --field-surface: #0f1d37;
    --overlay-scrim: rgba(2, 8, 23, .6);
    --shadow-drawer: 1.1rem 0 3rem rgba(0, 0, 0, .5);
    /* Taskbar skin, dark (mirror of the media-query block above). */
    --bar-shadow: 0 .25rem 1.2rem rgba(0, 0, 0, .5);
}

/* ---------- taskbar skin: responsive steps -----------------------------------
 * Owner request (2026-09-02): "when screen width comes in that the words are
 * replaced by icons and text size reduces."
 *
 * Reconciled deliberately with the skin's existing narrow behaviour rather than
 * by reverting to it. The JCOM bar the owner chose keeps the bar HEIGHT constant
 * and scrolls with pinned ends; JSLC's deleted behaviour grew the bar to 3.65rem
 * and shrank controls with a clamp(). Neither is reinstated. What changes here is
 * only the TYPE STEP and the CONTROL PADDING, and - at the narrow step - words
 * give way to icons. Bar height, order and the scroll-with-pinned-ends model are
 * unchanged, so the look the owner called clean is not regressed.
 *
 * Every value stays in this file. A surface stylesheet must never fork a --bar-*.
 *
 *   > 60rem   full labels, base type                (unchanged)
 *   <= 60rem  full labels, type and padding step down
 *   <= 50rem  ICONS ONLY, type steps down again; same breakpoint the skin
 *             already treats as narrow, so one boundary governs both.
 */
:root {
  --bar-icon-size: 1rem;
}
@media (width <= 60rem) {
  :root {
    --bar-font-size: .78rem;
    --bar-control-padding: .4rem .55rem;
  }
}
@media (width <= 50rem) {
  :root {
    --bar-font-size: .72rem;
    --bar-control-padding: .35rem .45rem;
    --bar-icon-size: 1.05rem;
  }
}

/* A fingertip needs the 44px target; a mouse does not. */
@media (pointer: coarse) {
  :root {
    --control-min-h: 2.75rem;
    --ui-control-height: 2.75rem;
  }
}