/* 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: #4a5568;
  --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: #8193bc;
  --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(74, 85, 104, .12);
  --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);
  /* ADDED 2026-09-30 (design-add, owner 15:02: "make the cic sidebar a
   * semitransparent overlay"; house style 2026-09-27: "semitransparent box is
   * our style design scheme"; torch ruling D3). The PWA_FORMAT §9 translucent
   * overlay, as tokens: paper under a blur. --surface-overlay (96%) stays
   * the opaque fallback where backdrop-filter is missing or transparency is
   * reduced. Derived from --of-paper/--of-ink, so both themes follow. */
  /* ONE GLASS RECIPE, TWO STRENGTHS (Cobalt C1, 2026-10-05). This file is the
   * only place either value lives; cobalt-shell.css (--cb-glass, --cd-glass)
   * and the node kit alias these names and hold no value of their own.
   *   --glass         62% paper, 12px blur: chrome over quiet ground (the
   *                   owner's "transparent overlay-ish" sidebars and sheets).
   *   --glass-strong  92% paper, same blur: text-dense panels over busy
   *                   content (maps, video). Measured 2026-10-03: muted text on
   *                   74% glass over the dark globe fell to ~3.5:1; at 92% it
   *                   holds 4.5:1.
   * --surface-overlay (96%) stays the solid fallback: no backdrop-filter, or
   * the visitor's Solid choice (html[data-glass="solid"]). */
  --surface-overlay-glass: color-mix(in srgb, var(--of-paper) 62%, transparent);
  --surface-overlay-glass-strong: color-mix(in srgb, var(--of-paper) 92%, transparent);
  --overlay-blur: blur(12px) saturate(160%);
  --overlay-border: color-mix(in srgb, var(--of-ink) 14%, transparent);
  --overlay-radius: 12px;
  --glass: var(--surface-overlay-glass);
  --glass-strong: var(--surface-overlay-glass-strong);
  --blur: var(--overlay-blur);
  /* Corners (Cobalt C9): 12px overlays (--overlay-radius), 8px cards, 5px controls. */
  --r-card: 8px;
  --r-control: 5px;
  --overlay-left: 0px;
  --overlay-right: 0px;
  --overlay-bottom: 0px;
  /* Inset of a floating overlay from the viewport edges, and on a phone the
   * strip left uncovered so a tap outside the drawer lands on the scrim (44px). */
  --overlay-gutter: .5rem;
  --overlay-tap-margin: 2.75rem;
  /* Text on glass: whatever is behind it (a dark globe, a light tile) shows
   * through at 28%, so secondary text and the accent are pulled toward --ink
   * until they hold WCAG AA 4.5:1 over a black or a white backdrop. */
  --overlay-ink-muted: color-mix(in srgb, var(--of-ink) 60%, var(--of-ink-soft));
  --overlay-accent-ink: var(--accent);
  /* Theme-true copies of the three raised surfaces for the shell chrome.
   * cic/topology/styles.css re-pins --surface-subtle, --control-surface and
   * --field-surface to their light values in a plain :root after this file,
   * so under the OS dark preference (no data-theme) a drawer got light ink on
   * light cards: measured 2026-09-30 on the navigation sidebar. These names
   * are not re-pinned anywhere, so the chrome can read the true theme. */
  --chrome-surface-subtle: rgba(255, 255, 255, .55);
  --chrome-control-surface: rgba(255, 255, 255, .72);
  --chrome-field-surface: #fff;
  --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 --- */
  /* 44px: cobalt CONTEXT.md ("Shell bar height: 44px"), shell_jslc_and_shell_cic.md
   * §G, and the owner 2026-10-03 09:46 "maximize the use of vertical space". It
   * replaces cic8's 77px (0c8e5ef). The touch target is the bar (Cobalt spec G). */
  --shell-bar-height: 2.75rem;
  /* The visible chrome frame includes the standalone iOS status-safe area.
   * Keep this separate from --bar-height: controls remain the normal bar
   * height while fixed panels and content start below the entire frame. */
  --shell-safe-top: env(safe-area-inset-top, 0px);
  --shell-frame-height: calc(var(--shell-bar-height) + var(--shell-safe-top));
  /* 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;
  /* Side rails follow the measured rightmost top-bar button; reading drawers
   * retain their existing readable width. */
  --cic-sidebar-width: var(--tab-width);
  --drawer-width: 11.5rem;
  /* 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: #8193bc;
  --bar-warn-fg-hover: #a5b4d6;
  --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: .15rem .45rem;
  --bar-control-gap: 0;
  --bar-control-radius: 0;
  --bar-control-border: 0;
  /* No dividers in the bar (Cobalt spec A). */
  --bar-control-divider: 0 none;
  --bar-control-divider-strong: 0 none;
  --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: .6875rem; /* 11px labels (Cobalt spec G) */
  --bar-font-weight: 400;
  --bar-line-height: 1;
  --bar-letter-spacing: .055em;
  --bar-text-transform: uppercase;

  --bar-motion: .16s ease-out;
  --motion-press: 80ms;
  --motion-fast: 140ms;
  --motion-base: 200ms;
  --motion-sheet: 280ms;
  --ease-out: cubic-bezier(.2,0,0,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1);
}

@media (prefers-color-scheme: dark) {
  /* An explicit light choice (html[data-theme="light"]) wins over the OS preference. */
  :root:not([data-theme="light"]) {
    --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: #b3bfd8;
    --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: #c5cedb;
    --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(197, 206, 219, .18);
    --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);
    /* The raised accent measures under 4.5:1 on dark glass over a white tile. */
    --overlay-accent-ink: color-mix(in srgb, var(--of-primary-soft) 35%, var(--of-ink));
    --chrome-surface-subtle: rgba(255, 255, 255, .06);
    --chrome-control-surface: rgba(255, 255, 255, .08);
    --chrome-field-surface: #0f1d37;
    /* 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: #4a5568;
  --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: #4a5568;
  --accent-briefings: var(--of-ink-soft);
}


/* 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: #b3bfd8;
    --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: #c5cedb;
    --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(197, 206, 219, .18);
    --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);
    --overlay-accent-ink: color-mix(in srgb, var(--of-primary-soft) 35%, var(--of-ink));
    --chrome-surface-subtle: rgba(255, 255, 255, .06);
    --chrome-control-surface: rgba(255, 255, 255, .08);
    --chrome-field-surface: #0f1d37;
    /* Taskbar skin, dark (mirror of the media-query block above). */
    --bar-shadow: 0 .25rem 1.2rem rgba(0, 0, 0, .5);
}

/* ---------- colour schemes (F52, Claude Design seat, 2026-10-04) ------------
 * Owner 2026-10-04 05:45: "give us more of an israel color scheme. the current
 * grey isnt bad give the ability to swtich between color schemes in a
 * preferences menu for cic shell". Spec: .inbox/torch0017/f52/THEMES.md.
 *
 * A scheme is html[data-scheme], set by shell-scheme.js from the Preferences
 * drawer. Graphite (the grey above) is the default and has no attribute. A
 * scheme re-points only hue-bearing tokens: bar fill, accent, rules, subtle
 * fills, paper. Status colours keep their jobs. Theme (data-theme) stays a
 * separate choice, so each scheme carries a dark block for both dark switches.
 * :root[data-scheme] is (0,2,0): it beats styles.css's plain :root re-pins of
 * --cyan, --line and --panel2 without depending on load order. --ink and
 * --muted are left alone at :root: the CIC page body reads them as light-theme
 * ink in both themes (see the scoped dark block in styles.css). */
:root[data-scheme="israel"] {
  --of-primary: #0038b8;
  --of-primary-bright: #1f5fe0;
  --of-paper: #ffffff;
  --of-paper-soft: #e8eefb;
  --of-ink: #0a1838;
  --of-ink-soft: #3f5078;
  --of-rule: #7f97cc;
  --of-warn: #7f97cc;
  --cyan: #0038b8;
  --line: #7f97cc;
  --line-strong: #3d5fae;
  --panel2: #e8eefb;
  --accent-subtle: rgba(0, 56, 184, .1);
  --chrome: rgba(0, 56, 184, .92);
  --overlay-scrim: rgba(0, 22, 72, .4);
  --version-strip-surface: rgba(0, 56, 184, .72);
  --bar-warn-fg: #c9d6f5;
  --bar-warn-fg-hover: #e8eefb;
  --accent-cic: #0038b8;
  --scheme-swatch: #0038b8;
}
:root[data-scheme="tekhelet"] {
  --of-primary: #1d5fa8;
  --of-primary-bright: #2f7bd0;
  --of-paper: #f5f9fd;
  --of-paper-soft: #e3eef9;
  --of-ink: #0b1b33;
  --of-ink-soft: #41566f;
  --of-rule: #86a7cf;
  --of-warn: #86a7cf;
  --cyan: #1d5fa8;
  --line: #86a7cf;
  --line-strong: #42709f;
  --panel2: #e3eef9;
  --accent-subtle: rgba(29, 95, 168, .1);
  --chrome: rgba(29, 95, 168, .92);
  --overlay-scrim: rgba(4, 30, 60, .4);
  --version-strip-surface: rgba(29, 95, 168, .72);
  --bar-warn-fg: #cfe1f5;
  --bar-warn-fg-hover: #e3eef9;
  --accent-cic: #1d5fa8;
  --scheme-swatch: #1d5fa8;
}
:root[data-scheme="israel"][data-theme="dark"] {
  --of-paper: #071433;
  --of-paper-soft: #102350;
  --of-ink: #f2f6ff;
  --of-ink-soft: #b6c4e8;
  --of-rule: #3f5c9e;
  --of-warn: #b6c4e8;
  --of-primary-soft: #9db8ff;
  --accent: var(--of-primary-soft);
  --link: var(--of-primary-soft);
  --accent-subtle: rgba(157, 184, 255, .16);
  --line-strong: #3f5c9e;
  --surface-overlay: rgba(7, 20, 51, .96);
  --field-surface: #0c1c44;
  --chrome-field-surface: #0c1c44;
  --overlay-scrim: rgba(2, 8, 28, .6);
}
:root[data-scheme="tekhelet"][data-theme="dark"] {
  --of-paper: #08172b;
  --of-paper-soft: #11273f;
  --of-ink: #eef5fc;
  --of-ink-soft: #b3c7dc;
  --of-rule: #3d5f84;
  --of-warn: #b3c7dc;
  --of-primary-soft: #a9cdf5;
  --accent: var(--of-primary-soft);
  --link: var(--of-primary-soft);
  --accent-subtle: rgba(169, 205, 245, .16);
  --line-strong: #3d5f84;
  --surface-overlay: rgba(8, 23, 43, .96);
  --field-surface: #0d2036;
  --chrome-field-surface: #0d2036;
  --overlay-scrim: rgba(2, 10, 22, .6);
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="israel"]:not([data-theme="light"]) {
    --of-paper: #071433;
    --of-paper-soft: #102350;
    --of-ink: #f2f6ff;
    --of-ink-soft: #b6c4e8;
    --of-rule: #3f5c9e;
    --of-warn: #b6c4e8;
    --of-primary-soft: #9db8ff;
    --accent: var(--of-primary-soft);
    --link: var(--of-primary-soft);
    --accent-subtle: rgba(157, 184, 255, .16);
    --line-strong: #3f5c9e;
    --surface-overlay: rgba(7, 20, 51, .96);
    --field-surface: #0c1c44;
    --chrome-field-surface: #0c1c44;
    --overlay-scrim: rgba(2, 8, 28, .6);
  }
  :root[data-scheme="tekhelet"]:not([data-theme="light"]) {
    --of-paper: #08172b;
    --of-paper-soft: #11273f;
    --of-ink: #eef5fc;
    --of-ink-soft: #b3c7dc;
    --of-rule: #3d5f84;
    --of-warn: #b3c7dc;
    --of-primary-soft: #a9cdf5;
    --accent: var(--of-primary-soft);
    --link: var(--of-primary-soft);
    --accent-subtle: rgba(169, 205, 245, .16);
    --line-strong: #3d5f84;
    --surface-overlay: rgba(8, 23, 43, .96);
    --field-surface: #0d2036;
    --chrome-field-surface: #0d2036;
    --overlay-scrim: rgba(2, 10, 22, .6);
  }
}

/* ---------- 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: .8rem;
}
@media (width <= 60rem) {
  :root {
    --bar-font-size: .65rem;
    --bar-control-padding: .1rem .35rem;
  }
}
@media (width <= 50rem) {
  :root {
    --bar-font-size: .625rem; /* never under 10px */
    --bar-control-padding: .1rem .3rem;
    --bar-icon-size: .75rem;
  }
}

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