/* theme.css -- the one dark-mode theme layer (owner: #1002).
 *
 * Belongs here: custom properties that carry a light value (:root) and a dark
 * value ([data-theme="dark"]) for colours that consumers in style.css and the
 * feature sheets reference through var(). Consumers keep their own selectors;
 * only the value pair moves here. No per-selector colour rules.
 *
 * Does not belong here: ds/tokens.css content. That file is synced from
 * upstream tools-ds and stays untouched; this layer sits beside it.
 *
 * Load order: linked straight after style.css in base.html and login.html.
 * Both blocks carry light and dark values, so position decides no winner.
 *
 * Tokens so far:
 *   --color-on-primary       text on a --color-primary fill (#1002 S4).
 *   --color-on-primary-soft  same, for the consumers whose light text is the
 *                            soft header tint instead of white.
 * Dark is the page background in both: --color-primary is lime there. The
 * dark values are var(--color-bg), so they follow that token. The system-dark
 * path (no data-theme) keeps the light values, as its consumers did before.
 *
 *   --chip-<hue>-bg / --chip-<hue>-fg  chip colour pairs (#1002 S5), for
 *                            hue in red, emerald, purple, orange, teal-grey,
 *                            blue, amber, gray, green, yellow: 20 tokens.
 * Defined ONLY under [data-theme="dark"], never in :root: the light values
 * differ per consumer, so each consumer keeps its own as the var() fallback,
 * e.g. background: var(--chip-red-bg, #fee2e2). The system-dark path (no
 * data-theme) leaves the tokens undefined and renders the fallbacks, as
 * before.
 *
 *   --status-chip-<status>   the /tools/timeline status chip colour (#1002 S6),
 *                            for status in discovery, planned, delivery,
 *                            validated, deployed, learning, success, killed,
 *                            unknown: 9 tokens. One value is the chip border,
 *                            its label and its .active fill.
 *   --status-chip-fg         label on an active chip fill (#000).
 *   --status-chip-fg-strong  same, for the killed chip only (#fff).
 *   --status-chip-unknown-text  the unknown chip label (#999; its border is
 *                            --status-chip-unknown, #888888).
 *   --rm-bar-<status>-bg / --rm-bar-<status>-fg  the /roadmap bar fill and
 *                            label, for status in discovery, validated,
 *                            delivery, deployed, learning, success, killed,
 *                            unknown: 16 tokens.
 *   --filter-chip-accent     the violet of the .filter-chip hover/active rules
 *                            and the .activity-stat-value number (#7c6af7).
 * The 29 S6 tokens are dark-only, like the --chip-* ones: each consumer keeps
 * its light value as the var() fallback, or (the chip and filter-chip dark
 * rules, which only apply under data-theme=dark) needs none.
 *
 *   --signal-danger / -ok / -ok-bright / -warn / -info / -info-alt  the dark
 *                            signal hues (#1002 S7): dots, stripes, git-pill
 *                            badges, .wf-deployed text, --git-accent. Dark-only;
 *                            each consumer keeps its light value as the
 *                            fallback. They do not alias the DS --st-*-fg
 *                            tokens, whose dark values differ.
 *   --diff-add-bg/-fg, --diff-del-bg/-fg, --diff-hunk-bg/-fg  the PR diff
 *                            modal rows (#1002 S7). Dark-only.
 *   --focus-glow             the focus/selected ring colour (#1002 S7): the
 *                            teal wash in light, lime in dark. The dark value
 *                            is a literal so it renders exactly as before.
 *   --code-inline-bg         the wash behind inline code in chat bubbles.
 *   --color-accent-text      accent-coloured link text: teal-mid in light,
 *                            lime in dark. Defined in both blocks, so its
 *                            consumers need no fallback.
 * The 12 S7 dark-only tokens and the 3 both-theme ones add 15 names.
 *
 * #1002 S8 moves the ten rules that used to sit in
 * `@media (prefers-color-scheme: dark)` blocks in style.css, so the flash
 * banner, the count chips and the review badges follow the PICKED theme, not
 * the OS. Their dark values are the 20 tokens below, all dark-only (each
 * consumer keeps its light value as the fallback):
 *   --flash-ok-bg/-border/-fg, --flash-error-bg/-fg   .pr-flash-ok|error
 *                            (the error border is --signal-danger-deep).
 *   --signal-danger-deep     #b91c1c: the flash-error border and the dark
 *                            .attention-item.has-blockers stripe.
 *   --pill-blue/-green/-red-bg|fg  .pchip-opened; .pchip-changed and
 *                            .rd-approved; .rd-changes-requested.
 *   --chip-violet/-gold/-rust/-sky-bg|fg  .pchip-merged; .rd-review-required;
 *                            .pchip-jira; .pchip-release.
 *
 * #1316 tokenises the colour literals still left in dark rules. All dark-only,
 * each value equal to the literal it replaced, so dark renders as before:
 *   --tone-<hue>-bg/-fg      more chip hues (indigo, lilac, navy, slate,
 *                            charcoal, teal, brown, plum, forest, pine), plus
 *                            --tone-forest-border, --pill-amber-bg/-fg and
 *                            --banner-error-bg/-fg. Not --chip-*: that family
 *                            is the S5/S8 pairs, pinned by test_chip_tokens.py.
 *   --lime-alpha-NN, --white-alpha-NN, --black-alpha-NN  colour washes and
 *                            shadow/scrim blacks, NN the alpha in percent.
 *   --news-*, --digest-*, --domain-chip-*, --initiative-card-bg  the
 *                            color-mix() surfaces (resolved at the root, where
 *                            --dt-*, --color-surface and --color-border are
 *                            defined once and never re-pointed).
 *   --google-btn-*, --login-github-*  the two login buttons: login.html links
 *                            only style.css and this sheet.
 *   the rest are one-offs named for their consumer.
 * .feed-avatar--circle keeps its hsl() literal: its hue is a per-element
 * custom property, which a root token cannot read.
 *
 * #1355 moves the Chart.js colours the chart templates used to pick in
 * JavaScript (`isDark ? ... : ...`, PALETTE_DARK, STATUS_COLORS_DARK) here.
 * Unlike the dark-only families above, each is defined in BOTH blocks: the
 * charts read them with cssToken() (static/chart-theme.js), which has no
 * fallback and throws on a missing token. Values are the old literals, byte
 * for byte:
 *   --chart-grid, --chart-grid-faint, --chart-grid-fainter  gridline washes.
 *   --chart-text, --chart-text-strong, --chart-tick, --chart-tick-label
 *                            legend and axis label colours.
 *   --chart-tooltip-bg/-title/-body/-border  the dashboard chart tooltips.
 *   --chart-series-0 to -9   the /tools/activity domain palette, by index.
 *   --chart-status-<status>  the /tools/timeline bar and legend ramp. The dark
 *                            value is var(--status-chip-<status>), so a bar
 *                            and its chip stay one colour.
 * The system-dark path (no data-theme) gets the :root values, as the charts'
 * old `data-theme === 'dark'` probe did. Pinned by
 * tests/test_chart_theme_tokens_1355.py.
 *
 * ONE prefers-color-scheme block stays, at the end of this file, on purpose:
 * with no data-theme attribute (JavaScript off, or before the pre-paint script
 * runs) those ten rules were dark on a dark OS, and the baseline harness's S
 * context requires that to hold. The block re-declares the 20 tokens above,
 * under the selector ds/tokens.css uses for its system-dark path, and ONLY
 * those: the other chip tokens must stay undefined there, because their
 * consumers render their light fallbacks on that path today. A picked theme
 * (data-theme light or dark) always wins over the OS.
 * tests/test_theme_media_queries.py pins that this is the only such block in
 * the governed sheets and that it matches the dark block value for value.
 */

:root {
  --color-on-primary: #fff;
  --color-on-primary-soft: var(--color-header-text);

  --focus-glow: color-mix(in srgb, var(--dt-teal) 15%, transparent);
  --code-inline-bg: rgba(0, 0, 0, .08);
  --color-accent-text: var(--dt-teal-mid);

  /* #1355: chart colours, light values (see the header). */
  --chart-grid: rgba(0,0,0,0.06);
  --chart-grid-faint: rgba(0,0,0,0.06);
  --chart-grid-fainter: rgba(0,0,0,0.05);
  --chart-text: #64748b;
  --chart-text-strong: rgba(0,0,0,0.65);
  --chart-tick: #64748b;
  --chart-tick-label: #64748b;
  --chart-tooltip-bg: #fff;
  --chart-tooltip-title: #0f172a;
  --chart-tooltip-body: #475569;
  --chart-tooltip-border: #e2e8f0;
  --chart-series-0: #5145cd;
  --chart-series-1: #a16207;
  --chart-series-2: #15803d;
  --chart-series-3: #b91c1c;
  --chart-series-4: #0f766e;
  --chart-series-5: #c2410c;
  --chart-series-6: #1d4ed8;
  --chart-series-7: #a21caf;
  --chart-series-8: #854d0e;
  --chart-series-9: #4d7c0f;
  --chart-status-discovery: #1d4ed8;
  --chart-status-planned: #6d28d9;
  --chart-status-delivery: #a16207;
  --chart-status-validated: #15803d;
  --chart-status-deployed: #0f766e;
  --chart-status-learning: #c2410c;
  --chart-status-success: #166534;
  --chart-status-killed: #b91c1c;
  --chart-status-unknown: #4b5563;
}

[data-theme="dark"] {
  --color-on-primary: var(--color-bg);
  --color-on-primary-soft: var(--color-bg);

  --focus-glow: rgba(196, 255, 69, .15);
  --code-inline-bg: rgba(255, 255, 255, .1);
  --color-accent-text: var(--dt-lime);

  --chip-red-bg: #450a0a;
  --chip-red-fg: #fca5a5;
  --chip-emerald-bg: #064e3b;
  --chip-emerald-fg: #6ee7b7;
  --chip-purple-bg: #3b1e6b;
  --chip-purple-fg: #d8b4fe;
  --chip-orange-bg: #431407;
  --chip-orange-fg: #fdba74;
  --chip-teal-grey-bg: #1e2d2f;
  --chip-teal-grey-fg: #9db8bc;
  --chip-blue-bg: #1e3a5f;
  --chip-blue-fg: #93c5fd;
  --chip-amber-bg: #78350f;
  --chip-amber-fg: #fef3c7;
  --chip-gray-bg: #1f2937;
  --chip-gray-fg: #9ca3af;
  --chip-green-bg: #14532d;
  --chip-green-fg: #86efac;
  --chip-yellow-bg: #3b2f00;
  --chip-yellow-fg: #fde68a;

  --status-chip-discovery: #6ea8d4;
  --status-chip-planned: #b8a9f7;
  --status-chip-delivery: #f7c948;
  --status-chip-validated: #5cd47b;
  --status-chip-deployed: #40e0d0;
  --status-chip-learning: #e0a458;
  --status-chip-success: #3fbf6f;
  --status-chip-killed: #e05050;
  --status-chip-unknown: #888888;
  --status-chip-fg: #000;
  --status-chip-fg-strong: #fff;
  --status-chip-unknown-text: #999;

  --rm-bar-discovery-bg: #a78bfa;
  --rm-bar-discovery-fg: #1e1b4b;
  --rm-bar-validated-bg: #60a5fa;
  --rm-bar-validated-fg: #0c2a52;
  --rm-bar-delivery-bg: #2dd4bf;
  --rm-bar-delivery-fg: #052e2b;
  --rm-bar-deployed-bg: #94a3b8;
  --rm-bar-deployed-fg: #0f172a;
  --rm-bar-learning-bg: #c084fc;
  --rm-bar-learning-fg: #2e1065;
  --rm-bar-success-bg: #4ade80;
  --rm-bar-success-fg: #052e13;
  --rm-bar-killed-bg: #f87171;
  --rm-bar-killed-fg: #450a0a;
  --rm-bar-unknown-bg: #9ca3af;
  --rm-bar-unknown-fg: #111827;

  --filter-chip-accent: #7c6af7;

  --signal-danger: #f87171;
  --signal-ok: #34d399;
  --signal-ok-bright: #4ade80;
  --signal-warn: #fbbf24;
  --signal-info: #60a5fa;
  --signal-info-alt: #5ea9ff;

  --diff-add-bg: #052e16;
  --diff-add-fg: #86efac;
  --diff-del-bg: #2d0a0a;
  --diff-del-fg: #fca5a5;
  --diff-hunk-bg: #0c1a3d;
  --diff-hunk-fg: #93c5fd;

  --tone-indigo-bg: #312e81;
  --tone-indigo-fg: #c7d2fe;
  --tone-indigo-deep-bg: #1e1b4b;
  --tone-lilac-bg: #3b0764;
  --tone-lilac-fg: #e9d5ff;
  --tone-navy-bg: #0c2742;
  --tone-slate-bg: #1e293b;
  --tone-slate-fg: #94a3b8;
  --tone-charcoal-bg: #374151;
  --tone-teal-bg: color-mix(in srgb, var(--dt-teal) 35%, transparent);
  --tone-teal-fg: #7ecfcf;
  --tone-brown-bg: #451a00;
  --tone-plum-bg: #2d1b4e;
  --tone-forest-bg: #052e16;
  --tone-forest-border: #166534;
  --tone-pine-bg: #134e4a;
  --tone-pine-fg: #5eead4;
  --banner-error-bg: #450a0a;
  --banner-error-fg: #fca5a5;
  --pill-amber-bg: #f59e0b;
  --pill-amber-fg: #1a1205;

  --lime-alpha-08: rgba(196, 255, 69, .08);
  --lime-alpha-12: rgba(196, 255, 69, .12);
  --lime-alpha-15: rgba(196, 255, 69, .15);
  --white-alpha-05: rgba(255, 255, 255, .05);
  --white-alpha-10: rgba(255, 255, 255, .1);
  --black-alpha-25: rgba(0, 0, 0, .25);
  --black-alpha-35: rgba(0, 0, 0, .35);
  --black-alpha-40: rgba(0, 0, 0, .4);
  --black-alpha-55: rgba(0, 0, 0, .55);
  --black-alpha-65: rgba(0, 0, 0, .65);

  --divider-charcoal: #374151;
  --review-approved-border: #065f46;
  --signal-danger-border: #7f1d1d;
  --signal-danger-strong: #ef4444;
  --color-on-accent: #0a1a1d;
  --filter-chip-fg: #fff;
  --news-link: #7dd3fc;
  --news-card-tint: color-mix(in srgb, var(--dt-lime) 8%, var(--color-surface));
  --news-card-border: color-mix(in srgb, var(--dt-lime) 40%, var(--color-border));
  --digest-bg: #0f1e20;
  --digest-tint: color-mix(in srgb, var(--dt-lime) 6%, #0f1e20);
  --digest-border: color-mix(in srgb, var(--dt-lime) 20%, var(--color-border));
  --domain-chip-fg: color-mix(in srgb, var(--dt-teal) 75%, #fff);
  --domain-chip-border: color-mix(in srgb, var(--dt-teal) 30%, var(--color-border));
  --domain-chip-bg: color-mix(in srgb, var(--dt-teal) 10%, transparent);
  --initiative-card-bg: color-mix(in srgb, var(--color-surface) 60%, transparent);
  --timeline-warning-strong: #f7c948;
  --timeline-warning-link: #b8a9f7;
  --google-btn-bg: #1e3a3e;
  --google-btn-fg: #e8f0f1;
  --google-btn-border: #2e5a5e;
  --google-btn-hover-bg: #26484d;
  --login-github-bg: #f0f6fc;
  --login-github-fg: #1b1f23;

  /* #1355: chart colours, dark values (see the header). */
  --chart-grid: rgba(255,255,255,0.08);
  --chart-grid-faint: rgba(255,255,255,0.05);
  --chart-grid-fainter: rgba(255,255,255,0.04);
  --chart-text: #94a3b8;
  --chart-text-strong: rgba(255,255,255,0.75);
  --chart-tick: #888;
  --chart-tick-label: #bbb;
  --chart-tooltip-bg: #1e293b;
  --chart-tooltip-title: #f1f5f9;
  --chart-tooltip-body: #94a3b8;
  --chart-tooltip-border: #334155;
  --chart-series-0: #7c6af7;
  --chart-series-1: #f7c948;
  --chart-series-2: #5cd47b;
  --chart-series-3: #e05050;
  --chart-series-4: #40e0d0;
  --chart-series-5: #f77c6a;
  --chart-series-6: #6ea8d4;
  --chart-series-7: #d46ef7;
  --chart-series-8: #e0c040;
  --chart-series-9: #a0e070;
  --chart-status-discovery: var(--status-chip-discovery);
  --chart-status-planned: var(--status-chip-planned);
  --chart-status-delivery: var(--status-chip-delivery);
  --chart-status-validated: var(--status-chip-validated);
  --chart-status-deployed: var(--status-chip-deployed);
  --chart-status-learning: var(--status-chip-learning);
  --chart-status-success: var(--status-chip-success);
  --chart-status-killed: var(--status-chip-killed);
  --chart-status-unknown: var(--status-chip-unknown);

  --signal-danger-deep: #b91c1c;
  --flash-ok-bg: #064e3b;
  --flash-ok-border: #047857;
  --flash-ok-fg: #d1fae5;
  --flash-error-bg: #4c1d24;
  --flash-error-fg: #fee2e2;
  --pill-blue-bg: #1e3a5f;
  --pill-blue-fg: #93c5fd;
  --pill-green-bg: #14532d;
  --pill-green-fg: #86efac;
  --pill-red-bg: #450a0a;
  --pill-red-fg: #fca5a5;
  --chip-violet-bg: #2e1b5e;
  --chip-violet-fg: #c4b5fd;
  --chip-gold-bg: #422006;
  --chip-gold-fg: #fcd34d;
  --chip-rust-bg: #4a2208;
  --chip-rust-fg: #fdba74;
  --chip-sky-bg: #0c3a52;
  --chip-sky-fg: #7dd3fc;
}

/* The one prefers-color-scheme block (see the header): the no-data-theme
   system-dark path for the ten #1002 S8 rules. Keep it equal to the S8 tokens
   at the end of the dark block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]),
  [data-theme="system"] {
    --signal-danger-deep: #b91c1c;
    --flash-ok-bg: #064e3b;
    --flash-ok-border: #047857;
    --flash-ok-fg: #d1fae5;
    --flash-error-bg: #4c1d24;
    --flash-error-fg: #fee2e2;
    --pill-blue-bg: #1e3a5f;
    --pill-blue-fg: #93c5fd;
    --pill-green-bg: #14532d;
    --pill-green-fg: #86efac;
    --pill-red-bg: #450a0a;
    --pill-red-fg: #fca5a5;
    --chip-violet-bg: #2e1b5e;
    --chip-violet-fg: #c4b5fd;
    --chip-gold-bg: #422006;
    --chip-gold-fg: #fcd34d;
    --chip-rust-bg: #4a2208;
    --chip-rust-fg: #fdba74;
    --chip-sky-bg: #0c3a52;
    --chip-sky-fg: #7dd3fc;
  }
}