/* Dark palette trial (TRA-1439) — skeleton-owned, NOT a copy of an app file.
 *
 * css/theme.css is the app's compiled theme and stays re-compilable, so the
 * dark values being tried out live here and override it. Loaded after
 * theme.css on the dashboard, /bar and /bar-2 pages; scripts/generate-colors.mjs
 * inlines it into /colors, marks each overridden token with the app's value
 * beside it, and reproduces every section below — its note, its tokens and
 * its component rules — at the end of that page. Written as titled sections
 * (`---- Title ----`) for that reason: keep the format when adding one.
 * Once the palette is settled, the token values move into the `.dark` block
 * of packages/shared/src/styles/tokens.css, the component rules into the
 * primitives they patch, and this file is deleted.
 */

/* ---- Widen the surface ladder (dark) ----------------------------------------
 * The problem (audit finding 2, "Separate the surfaces in dark"): shadows do
 * not read on a near-black ground, so surface steps and borders are the only
 * separation left — and both were too tight. A hovered row was a 1.05 step on
 * the card, invisible; the popover a 1.20; the well a 1.07.
 *
 * The device: SURFACES carry the separation, borders support. The card keeps
 * its value (every text ratio and 187 usages are calibrated to it); the ladder
 * widens around it — shell darker, well darker, row and popover lighter — and
 * the borders come up a step so table lines still read without becoming the
 * dominant separator. Contrast ratios against the card, before → after:
 *
 *   card on shell      1.25 → 1.32      border-subtle      1.16 → 1.26
 *   popover on card    1.20 → 1.37      border-strong      1.51 → 1.80
 *   well on card       1.07 → 1.14      hovered row        1.05 → 1.23
 *
 * A hovered row is still inside the card (1.62 against the shell), not a new
 * object. text-muted brightens one notch only because the popover got
 * lighter: on it muted text would otherwise fall to 2.9 (now 3.11); on the
 * card it rises from 3.90 to 4.28.
 *
 * theme.css declares these in an unlayered `.dark` block after its @layer
 * blocks close, so the same selector from a later stylesheet wins on source
 * order; every consumer reads them through var() at use time. */
.dark {
  /* Layer 1 — app-surface ladder */
  --color-app-shell:       #0B0E14;   /* was #11151C */
  --color-app-well:        #191E29;   /* was #1D2332 */
  --color-app-row:         #2F3749;   /* was #262C3C */
  --color-app-raised:      #353E53;   /* was #2D3548 */

  /* The gradients carry the same stops as the ladder, so they don't drift
     from it: shell runs its own top down to below the new shell; the card
     runs raised → well; hover runs row → card. */
  --gradient-shell: linear-gradient(160deg, #161B26 0%, #080B10 100%);      /* was #1A1F2B → #0D1016 */
  --gradient-card: linear-gradient(160deg, var(--color-app-raised) 0%, #191E29 100%); /* was → #1D2332 */
  --gradient-card-hover: linear-gradient(160deg, #2F3749 0%, #232837 100%); /* was #262C3C → #232837 */

  --text-muted: #828B9B;     /* was #7C8493 */

  --border-subtle: #303948;  /* was #2A3441 */
  --border-strong: #445064;  /* was #3A4556 */
}

/* ---- Floating objects sit one step UP the ladder ---------------------------
 * The bottom bar floats INSIDE the Home card and was painted with the card's
 * own colour (`bg-surface-card`): a 1.00 step against its ground, with only a
 * 1px border and a near-black shadow — which on a dark card darkens it by a
 * 1.09 step, below what the eye registers — to say "above". Lighter = higher
 * on a dark ground, so the bar and everything that floats with it take the
 * raised surface (1.37 against the card with the ladder above).
 *
 * `--popover` is the reason the raised step never showed anywhere: the app
 * aliases it to the CARD, so menus, popovers, the count panels, the save panel
 * and the notes/pending row (both paint `var(--popover)`) all sat card-on-card
 * while `--surface-popover` pointed at the raised colour unused. Re-pointing
 * the alias fixes the whole family at once; the two rules below cover the bar
 * itself (a verbatim `bg-surface-card` utility, beaten here by an unlayered
 * rule of higher specificity) and the solo pending row (card surface in the
 * app's CSS). Dark only — light keeps the card, where shadows do the work. */
.dark {
  --popover: var(--surface-popover);
}
.dark .hdw-ab,
.dark .hdw-ab-tab.solo {
  background: var(--surface-popover);
}

/* ---- Accent as text, hairline and focus ring (dark) -----------------------
 * Material's dark rule: the primary is desaturated to its 200 tone so that,
 * used as TEXT, it clears 4.5:1 on every elevation. The app keeps the light
 * theme's brand violet in dark; as text that is 3.47 on the card and 2.52 on
 * the raised surface, and the lighter --accent-text (#a283ff) still only 3.68
 * on the raised surface that popovers and the bar now sit on. Same hue (255°),
 * lightness 68 → 78, saturation 100 → 75:
 *
 *   accent-text on card    5.05 → 6.27      on raised   3.68 → 4.56
 *
 * --accent-line (hairlines, the selected-state ring) was the brand at 45%,
 * a 1.71 step on the card; the desaturated violet at 55% reaches 3.09, the
 * non-text minimum. --ring (keyboard focus) follows the text tone so a focus
 * ring is never fainter than the text it outlines. --accent-brand itself is
 * untouched: it is the FILL of the Outreach/Save buttons, where white text
 * sits on it, and Material keeps fills saturated. */
.dark {
  --accent-text: #B19DF1;                   /* was #a283ff */
  --accent-line: rgba(177, 157, 241, 0.55); /* was rgba(132, 92, 255, 0.45) */
  --ring: var(--accent-text);               /* was var(--accent-brand) */
}

/* ---- The bar's shadow is a cast shadow again (dark) ------------------------
 * The compact-bar commit gave the dark arm the light theme's five-layer ramp
 * at 22% — tuned for cream, where a 7.5% hue-matched ink reads. On a dark card
 * it darkens the ground by a 1.09 step and disappears. Material: keep shadows
 * DARK in a dark theme (no light glows), and let the lighter surface make the
 * shadow visible. Two black layers — a tight contact and a wide ambient — at
 * the alpha the dark bulk bar already uses (0.6 / 0.3), so the bar and the
 * bulk bar cast the same shadow. Same shape one step down for the cards that
 * float behind the bar. */
.dark {
  --shadow-float-bar: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 36px -6px rgba(0, 0, 0, 0.55);
  --shadow-float-behind: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 22px -6px rgba(0, 0, 0, 0.45);
}

/* ---- Dialogs are the highest surface (dark) ---------------------------------
 * DialogContent paints `bg-surface-shell` — the darkest surface on the page.
 * In light that is the cream ground and reads fine; in dark it put the modal's body BELOW the page it floats over,
 * while the Command list inside it (`bg-popover`, now the raised surface)
 * came out lighter than its own dialog: an inverted hierarchy, read as "the
 * modal is too dark". Material: the highest elevation gets the lightest
 * surface (24dp). A dialog sits above every popover, so it takes the raised
 * surface; the list inside shares it and is separated by its own hairline,
 * exactly as in light, where the two differ by a 1.03 step. */
.dark [data-slot='dialog-content'] {
  background: var(--surface-popover);
}

/* ---- The list inside a dialog is a recessed field (dark) --------------------
 * With the dialog on the raised surface, the Command panel inside it (search
 * + rows, `bg-popover`) came out the SAME colour as the dialog and read as
 * flat. In light the panel is a step lighter than the dialog (card on cream);
 * dark has no step above raised, so the panel goes one step DOWN instead —
 * the card colour, a 1.37 step, which is how a field reads on a dark ground.
 * Its rows then hover to `--surface-row` (a lighter 1.23 step on the card, the
 * same hover the tables use) rather than the well, which on the card would be
 * a darker, near-invisible 1.14. */
.dark [data-slot='dialog-content'] [data-slot='command'] {
  background: var(--surface-card);
}
.dark [data-slot='dialog-content'] [data-slot='command-item'][data-selected='true'] {
  background: var(--surface-row);
}

/* ---- Owner avatars: the light theme's tan, as sand on dark ----------------
 * Light paints the owner-stack fallbacks as three tan steps (hue 30°, L 78–86,
 * S 56) with white initials; dark swapped them for three cold blue-greys that
 * sat within 1.07–1.28 of the surfaces around them, so in the owner picker
 * the circles all but vanished. Bringing the tan down at its light saturation
 * turned it BROWN (a dark orange). Sand, not brown: hue nudged to 36° (a step
 * toward yellow, away from orange), saturation cut to 20%, lightness held in
 * the middle (42/46/50) — the same three-step ladder (0 = darkest, as the
 * stack indexes it), now a muted warm stone that reads as the light chip's
 * dark-mode sibling:
 *
 *   fill vs card      1.28 → 3.04 / 3.55 / 4.13
 *   white initials    4.84 / 4.14 / 3.56 — the lightest step is under 4.5,
 *                     which the app accepts for these (it calls the initials
 *                     a mark; light runs them at 1.3–1.6)
 *
 * --owner-mark follows step 0 as it does in the app. --tooltip is pinned:
 * the app aliases it to --avatar-fallback-1 in dark, and a sand tooltip is
 * not the intent. */
.dark {
  --avatar-fallback-0: #816F56;   /* was #2e3a4e */
  --avatar-fallback-1: #8D7A5E;   /* was var(--border-strong) */
  --avatar-fallback-2: #998566;   /* was #465476 */
  --owner-mark: #816F56;          /* was #2e3a4e */
  --tooltip: var(--border-strong); /* was var(--avatar-fallback-1) */
}

/* ---- The bar's dividers, on the raised bar (dark) --------------------------
 * The rules between the pill's segments paint `bg-border-subtle`, a colour
 * tuned as a 1.26 hairline on the CARD. On the raised surface the bar now
 * sits on it is a 1.09 step and disappears; even border-strong only reaches
 * 1.31 there. A white hairline at 20% reads at 1.82 on the raised surface —
 * the same weight the bar's own border has against the card — and, being an
 * alpha, it stays in step if the raised surface moves again. Scoped to the
 * bar: rules elsewhere still sit on the card and keep the token. */
.dark .hdw-ab .hdw-ab-rule {
  background: rgba(255, 255, 255, 0.2);
}

/* ---- Segmented switch: a trough with a raised thumb (dark) -----------------
 * The shared SegmentedSwitch paints its track `bg-surface-well` and the
 * active segment `bg-surface-card` + shadow-sm. In light that is a cream
 * trough with a white thumb. In dark the well is a 1.14 step on the card and
 * the card thumb a 1.14 step on the well — neither reads — and inside the
 * added-note (now on the raised surface) the thumb vanished entirely: the
 * "Best contact / All 3 contacts" cohort switch looked like flat text. Same
 * device as the light theme, one ladder step further apart: the track drops
 * to the shell (a 1.32 trough on the card, 1.84 on the raised note), the
 * thumb rises to the raised surface (1.84 on the trough) with a white
 * hairline for an edge, since the shadow does not read here. Keyed on the
 * primitive's own role + track class, so every switch in dark gets it. */
.dark [role='group'].bg-surface-well {
  background: var(--surface-shell);
  border-color: rgba(255, 255, 255, 0.08);
}
.dark [role='group'].bg-surface-well > button[aria-pressed='true'] {
  background: var(--surface-popover);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}