/* ═══════════════════════════════════════════════════════════════════════════
   YisraCase — unified theme tokens
   Single source of truth. Load FIRST in the shell and in every framed page,
   before that page's own <style> block or stylesheet.

   Colour + density values come from the Claude Design mockup
   ("YisraCase Theme.dc.html"). Everything past the CORE block is an addition
   required by the real repo — each one is annotated with why it exists and
   which pages needed it. Do not add tokens without doing the same.

   Scope: index.html and every page nested outward from it, at any depth.
   OUT of scope: portal/*, book.html, manage.html, and the other externally
   served pages. They keep their own :root.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── CORE (from the mockup — do not retune) ─────────────────────────── */
  --sidebar-w: 220px;
  /* The mockup's value, landed in the density arc (D1) after the colour arc
     held it at 56 to keep that arc a visual no-op.

     Everything that depends on it derives from it — #appHeader height, body
     padding-top, #appSidebar/backdrop top, and the tab iframe's
     calc(100vh - var(--header-h)) — so the shell tracks this token and nothing
     re-states 56. Measured at both 56 and 52, desktop and narrow: every header
     child stays vertically centred and nothing clips or newly overflows.

     Two things this does NOT fix, both pre-existing and unchanged in size:
       · #appHeader renders 1px taller than the token (border-bottom, content-box),
         so the first 1px of page content sits under that border.
       · .hdr-logo is wrapped in an inline <a>, whose line box is ~44px tall for
         a 40px image, so the logo sits 2px above optical centre — 4px above /
         8px below here, not the symmetric 6/6 a bare image would get. */
  --header-h: 52px;

  --accent: #4ea6e2; /*#07ADEF;*/
  --accent-dark: #0590c8;
  --accent-soft: rgba(7, 173, 239, 0.12);

  --page-bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  /* ADDED: a container that is recessed BELOW --page-bg in BOTH modes.
     --surface-2 is a *contrast tone* next to --surface and it deliberately
     flips direction by mode (recessed in light, raised in dark) because dark
     mode has no room to go darker. That is fine for chips and striped rows,
     and wrong for nesting: pipelineBoard puts cards inside column troughs, and
     mapping the trough to --surface-2 makes cards sit ABOVE their column in
     light and BELOW it in dark. Use this for any container a card sits inside. */
  --surface-sunken: #f1f3f6;

  --sidebar-bg: #f7f8fa;
  --sidebar-sublist-bg: #eef0f3;
  --hover: #e8eaed;

  --border: #e1e4e8;
  --border-strong: #cfd4da;

  --text: #2c3e50;
  --text-2: #5a6b7c;
  --text-muted: #5a636e;   /* RETUNED from #6c757d — 4.22 on --surface-2 */

  /* RETUNED from the mockup's #16a34a / #d97706 / #d9534f. Those measured
     2.87–3.96 as text on every light surface (--surface, --page-bg,
     --surface-2) and failed AA everywhere they were used as text, an icon or
     a border label. The mockup's values were chosen against its dark preview;
     the light direction was never checked. These pass on all three light
     surfaces (5.86–6.93) AND on their own -soft tint (5.70–5.95), which is
     what makes the -on-soft role below redundant for these three.

     This turned out not to be three tokens but a PATTERN. Every light value
     inherited from the mockup failed as text, measured on --surface-2 (the
     worst of the three light surfaces): --info 2.89, --text-muted 4.22, all
     four --cat-* 2.24–4.47, --accent 2.29. The mockup was designed against
     its own dark preview and the light direction was never checked in any of
     them. All are now retuned except --accent, which is the brand and cannot
     move — see the --accent-2 note below. */
  --ok: #136c34;
  --warn: #96450a;
  --danger: #a52f23;
  --info: #1d5fd0;   /* RETUNED from #4f8ef7 — 2.89 on --surface-2 */
  --ok-soft: rgba(22, 163, 74, .12);
  --warn-soft: rgba(217, 119, 6, .12);
  --danger-soft: rgba(217, 83, 79, .12);

  /* ── ADDED: status colours as FILLS ──────────────────────────────────
     --ok/--warn/--danger above are tuned as TEXT on a surface, which is why
     they LIGHTEN in dark mode (#16a34a on #131722 fails; #4ad28b passes).
     That reasoning is exactly backwards when the same token is used as a
     button background with text on top: dark mode's lighter value makes white
     label text fail. Measured on apikeys.html — the revoke button went 4.13:1
     to 2.60:1 purely from adopting the shared sheet.

     These are mode-INDEPENDENT on purpose. A solid fill needs the same
     contrast against its label in both modes, so there is nothing to invert.
     17 sites across 14 files use a status token as a background; they all
     want these, not the text tokens above.

     Pairing: --ok-fill and --danger-fill take --fill-text (white).
              --warn-fill takes --warn-text (near-black) — white on amber is
              3.19:1 and fails, near-black is 5.46:1 and passes.
              --accent takes --accent-text (near-black). */
  /* Neutral solid button. The sheet had no token for a grey fill, so
     communicate.html's .btn-log kept a literal. --text-muted is close but is
     a text token; a fill needs its own. Label: --fill-text. */
  --neutral-fill: #525a64;  /* --fill-text on this: 6.99 */

  --ok-fill: #136c34;       /* --fill-text on this: 6.52 */
  --warn-fill: #d97706;     /* --warn-text on this: 5.46 */
  --danger-fill: #a52f23;   /* --fill-text on this: 6.93 */
  --warn-text: #1a1a1a;     /* label that sits ON --warn-fill */

  /* ── text sitting ON a --*-soft tint ─────────────────────────────────
     DEPRECATED for ok/warn/danger. These existed because the light status
     values were too pale to read on their own tint; retuning those values
     above fixed the cause, so all three are now plain aliases. ~50 call sites
     use them and keep working unchanged; new code should use --ok / --warn /
     --danger directly. A later slice can collapse the call sites.

     --accent-on-soft is NOT an alias and is not deprecated: --accent is the
     brand blue and cannot be retuned, so it genuinely needs a partner. */
  --ok-on-soft: var(--ok);
  --warn-on-soft: var(--warn);
  --danger-on-soft: var(--danger);
  --accent-on-soft: #0a5f80;  /* on --accent-soft: 6.31 */

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --radius: 6px;
  --radius-sm: 4px;

  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── ADDED: shell chrome ─────────────────────────────────────────────
     index.html defines these today and nothing else does. Lifted here so
     the shell's :root can be deleted like every other page's. */
  --sidebar-skinny-w: 56px;
  --shadow-drawer: 2px 0 12px rgba(0, 0, 0, 0.18);
  --backdrop: rgba(0, 0, 0, 0.4);

  /* ── ADDED: label colours for solid fills ───────────────────────────
     Mode-independent — a solid fill needs the same contrast against its label
     in both modes, so these never invert and are kept out of the dark block
     on purpose. Neither is --text. */
  /* Label ON --accent. White measures 2.55:1 against #07ADEF and fails; the
     app had already worked this out — seven family-B pages hardcode `#001` on
     accent fills, which measures 8.17:1. This makes that convention a token.
     NOT white: use --fill-text for the status fills below. */
  --accent-text: #001018;   /* on --accent: 7.57 */
  --fill-text: #ffffff;     /* on --ok-fill 6.52, on --danger-fill 6.93 */

  /* ── ADDED: secondary + info-hover ───────────────────────────────────
     --accent-2 replaces the #82c0ff used across availabilitymanager,
     bookingviewsmanager, connections, pageManager, redirects.
     --info-dark replaces --blue2 (#3a7de8, 17 uses) — the hover partner of
     --blue/--info across the automation family. */
  /* --accent-2 was #82c0ff — the family-B DARK value, installed as the light
     value by mistake. All 13 uses are `color:`, never a fill, and it measured
     1.92:1 on white: pale-blue-on-white, effectively unreadable. #0d6f94 is
     5.65 on --surface and 5.08 on --surface-2. The dark block keeps the light
     blue, which is correct there. */
  /* --accent-2 is ALSO THE TOKEN FOR ACCENT-COLOURED TEXT. --accent itself
     measures 2.29–2.55 on light surfaces: it is a fill and large-decoration
     colour only and must not carry body-sized text. That is a role boundary,
     not a defect to fix — #07ADEF is the brand. */
  --accent-2: #0d6f94;
  --info-dark: #3a7de8;
  --info-soft: rgba(79, 142, 247, .12);

  /* ── ADDED: code / pre surface ───────────────────────────────────────
     --navy (#1a1a2e) and --navy2 (#16213e) are used as <pre> backgrounds in
     hooks/workflows/sequences/emailIngest/phoneIngest, always paired with a
     hardcoded color:#e2e8f0. That is a real concept the core sheet lacked:
     a code surface that is dark in BOTH modes. Convert those inline
     color:#e2e8f0 declarations to var(--code-fg) at the same time. */
  --code-bg: #1a1a2e;
  --code-bg-2: #16213e;
  --code-fg: #e2e8f0;

  /* ── ADDED: categorical hues ─────────────────────────────────────────
     automation/activity.html colour-codes event categories and genuinely
     needs distinct hues that carry no status meaning. Mapping these onto
     ok/warn/danger would make unrelated rows read as errors. Keep the set
     small — four is the ceiling; do not grow it to cover one-off badges. */
  /* RETUNED from #8b5cf6 / #14b8a6 / #6366f1 / #ec4899 — all four failed AA
     as light text (2.24–4.47 on --surface-2). Dark values below unchanged;
     they were always fine. */
  --cat-purple: #6d28d9;
  --cat-teal: #0f766e;
  --cat-indigo: #4338ca;
  --cat-pink: #be185d;

  /* Categorical FILLS. Mode-INDEPENDENT, and deliberately identical to the
     light hues above — those are already dark enough to carry a white label
     (5.47–7.90). The dark hues are not (white on #a78bfa is 2.72), which is
     why a fill cannot simply reuse --cat-*. Label: --fill-text. */
  --cat-purple-fill: #6d28d9;
  --cat-teal-fill: #0f766e;
  --cat-indigo-fill: #4338ca;
  --cat-pink-fill: #be185d;

  /* ── ADDED: density scale (measured off the mockup) ──────────────────
     Optional in the colour pass, mandatory in the density pass. These are
     the numbers that make the app read as one compact UI rather than nine
     different ones. Frequency in the mockup is in the comments. */
  --fs: 12.5px;      /* base — 46 uses */
  --fs-sm: 11.5px;   /* secondary / meta — 15 uses */
  --fs-xs: 10.5px;   /* badges, counts — 5 uses */
  --fs-lg: 14px;     /* section headings — 20 uses */
  --fs-title: 19px;  /* page title — 1 use */

  --ctl-h: 28px;     /* inputs, selects, table-row buttons */
  --ctl-h-lg: 32px;  /* toolbar / primary buttons */

  --pad-cell: 6px 8px;    /* table cells — 33 uses */
  --pad-btn: 12px 12px;/*7px 12px; */   /* buttons — 15 uses */
  --pad-card: 13px;       /* card interiors — 6 uses */
  --pad-panel: 18px 20px; /* outer panels — 4 uses */

  --gap-sm: 6px;
  --gap: 8px;
  --gap-lg: 14px;
}

html[data-theme="dark"] {
  --page-bg: #131722;
  --surface: #1a1e2a;
  --surface-2: #202634;
  --surface-sunken: #0e1119;   /* below --page-bg, so the trough stays a trough */

  --sidebar-bg: #1a1e2a;
  --sidebar-sublist-bg: #131722;
  --hover: #2a2f3d;

  --border: #2c313d;
  --border-strong: #3b4252;

  --text: #e1e4e8;
  --text-2: #b3bcc9;
  --text-muted: #8b95a8;

  --accent-soft: rgba(7, 173, 239, 0.22);

  --ok: #4ad28b;
  --warn: #e0b341;
  --danger: #ff7670;
  --info: #6ea3ff;
  --ok-soft: rgba(74, 210, 139, .15);
  --warn-soft: rgba(224, 179, 65, .15);
  --danger-soft: rgba(255, 118, 112, .15);

  /* ok/warn/danger -on-soft are var() aliases in :root and follow the dark
     values above automatically — nothing to restate. --accent-on-soft does
     need a dark value: --accent on the dark tint measures 4.47, just under
     AA, which is why it is not an alias in either direction. */
  --accent-on-soft: #3fc3ff;  /* on dark --accent-soft: 5.71 */

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  /* additions, dark variants */
  --shadow-drawer: 2px 0 12px rgba(0, 0, 0, 0.5);
  --backdrop: rgba(0, 0, 0, 0.6);
  --accent-2: #6ea8fe;
  --info-dark: #4f8ef7;
  --info-soft: rgba(110, 163, 255, .18);

  /* code surface stays dark; only the second tone lifts so it stays
     distinguishable from --surface once the page around it is dark too */
  --code-bg: #12151f;
  --code-bg-2: #1b2233;

  --cat-purple: #a78bfa;
  --cat-teal: #2dd4bf;
  --cat-indigo: #8ea2ff;
  --cat-pink: #f472b6;

  /* NOT restated, and that is deliberate: --accent, --accent-dark,
     --accent-text, --fill-text, --code-fg, --ok-fill, --warn-fill,
     --danger-fill, --warn-text, --radius*, --sidebar-w, --sidebar-skinny-w,
     --header-h, --ui, --mono, and the whole density scale are
     mode-independent and inherit from :root. */
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--ui);
  transition: background .18s ease, color .18s ease;
}

/* Links use --accent-2, NOT --accent. This rule said --accent until slice 8
   measured it: 2.55 / 2.38 / 2.29 on the three light surfaces — exactly the
   range §3.1 quotes as the reason --accent must never carry text. The rule
   predated that correction and was never updated with it, so every converted
   page inherited a failing link colour from the sheet itself. Worst case was
   calendar.html, where FullCalendar builds every day number as an <a>: they
   went from black at 21:1 to 2.38 the moment theme.css was linked.
   --accent-2 measures 5.65 / 5.27 / 5.08 light and 6.88 dark.

   The hover no longer changes colour. --accent-dark was 3.24–3.60 and failed
   too; the underline already carries the affordance. */
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Control colour baseline, dark only ──────────────────────────────────
   A deliberate exception to plan §3.1's "no element rules in theme.css",
   and the plan has been amended to say so. That rule is about DENSITY: the
   45 pages that load no element layer are already at 11-13px and need no
   padding. COLOUR is a different thing, and this sheet already sets it on
   `body` and `a` for exactly the same reason.

   THE BUG: 25 pages have an <input>, <select> or <textarea> with no colour
   rule anywhere. Only style.css:350 paints controls dark, and only 14 pages
   link it. On the rest the UA renders the field white -- in dark mode. The
   colour arc tokenised what each page declared and never asked what each
   page OMITTED, which is how this survived eleven slices.

   SPECIFICITY IS THE WHOLE DESIGN, so :where() and not :not().

   The obvious spelling, `input:not([type=checkbox]):not([type=radio])`,
   weighs 0,3,2 -- because :not() contributes its ARGUMENT's specificity,
   twice. That is heavier than style.css's own 0,1,2, and heavy enough to
   beat page rules style.css has coexisted with for the whole arc. Measured
   in Chromium, it silently overrode all three of these:

     css/yc-forms.css:448  .yc-readonly .yc-field input     0,2,1
     automation/sequences.html:511
                           .pfe-row input[type=text].invalid 0,3,1
     connections.html:175  .pw-row input[readonly]           0,2,1

   -- readonly fields stop looking readonly and invalid fields stop looking
   invalid, in dark only, on pages that had already done the work right.

   :where() contributes ZERO, so the guards cost nothing and this lands at
   0,1,2: byte-for-byte the cascade weight style.css has carried on 14 pages
   since slice 9c. A backstop for controls nothing else paints, not an
   override of controls something already does.

   Both halves, never one. A rule that set only `background` would leave
   --text inheriting onto it; one that set only `color` would leave a dark
   label on whatever the page chose. That asymmetry is the defect class this
   commit exists to close -- see plan §3.2 -- so it must not reintroduce it.

   CHECKBOX AND RADIO ARE EXCLUDED ON PURPOSE: painting them --surface
   flattens the UA's own checked rendering. style.css does not exclude them
   and so still paints them on its 14 pages; that is pre-existing and left
   alone rather than changed from here.

   style.css keeps its own copy. Same values, loaded after theme.css on all
   14 of its pages and now at the same specificity, so it wins there -- plus
   the !important border it needs to beat inline overrides. Do not delete it. */
html[data-theme="dark"] input:where(:not([type=checkbox]):not([type=radio])),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface);
  color: var(--text);
  /* border-STYLE too, or border-color does not draw a border. A control with
     no border rule keeps the UA's `2px inset`, and `inset` renders a colour as
     a 3D bevel -- with --border that came out as a pale bar along the bottom
     and right edge, which is worse than the grey it replaced. `solid` is also
     what style.css ships. border-WIDTH is deliberately NOT set: that is the
     density lever and it stays out of this sheet per plan §3.1, so nothing
     reflows. */
  border-color: var(--border);
  border-style: solid;
}

/* Deliberately NOT here: a global `* { box-sizing: border-box }` reset.
   style.css sets box-sizing per-element today and several pages lay out
   against content-box. A global reset would break them all at once, in a way
   that is hard to attribute back to this change. If we want it, it is its own
   slice with its own verification pass. */

/* ── SweetAlert2 (third-party overlay) ───────────────────────────────────
   Moved here from index.html (slice 10b commit 2). Slice 9c left these in
   the shell on the reasoning that SweetAlert is an overlay the shell owns.
   That reasoning was sound for a shell-level dialog and wrong for every
   other one: A SWAL RENDERS INTO THE DOCUMENT THAT FIRED IT. A dialog fired
   from a framed page is a child of that frame's <body>, not the shell's, so
   the shell's rules never reached it -- which is why slice 10 had to theme
   five family-E modules' dialogs one at a time via customClass.

   NOT style.css, which is where the handoff sent them. style.css is linked
   by 14 HTML pages; theme.css by 69. Of the 42 pages that fire a Swal,
   style.css reaches 11 and theme.css reaches 40 -- so style.css would have
   left 29 framed pages with a white popup in dark and failed the very
   acceptance test the move exists to pass. The two Swal pages theme.css
   does not reach, caseerror.html and docReq.html, link neither sheet: they
   are externally served and out of the arc's scope, and they correctly keep
   swal2's own light defaults.

   Unscoped and dark-only, so light mode keeps swal2's defaults untouched.
   !important is carried over from the shell copy verbatim -- swal2 ships its
   own :where()-wrapped rules at 0,0,2, but a page's local <style> can beat
   0,2,1 without it.

   --sidebar-bg on the inputs is also carried over verbatim rather than
   corrected. In dark it resolves to #1a1e2a, the same value as --surface, so
   a swal2 input has no fill contrast against the popup it sits in and the
   border does all the work. That is the shell's current appearance and
   changing it is a visual change, not a move. Flagged, not taken. */

html[data-theme="dark"] .swal2-popup {
  background: var(--surface) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
  color: var(--text) !important;
}
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
  background: var(--sidebar-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}