/* Quiet Precision design tokens -- the single source for every custom property
   in the app. Extracted from global.css on 2026-08-19.

   It lives in its own file because onboarding.html does NOT extend base.html and
   never loaded global.css, so on that page --ink, --muted, --line and the whole
   type scale were simply undefined. onboarding.css's own --onb-strong and
   --onb-secondary had been pointed at var(--ink)/var(--muted), which meant they
   resolved to nothing there and every "secondary" line rendered at full ink
   strength -- the page had no text hierarchy at all.

   Load this before any stylesheet that reads a token. Anything that adds a
   token adds it here, not in a page stylesheet. */

/* D31 shared product shell foundation. */
:root {
  /* One typeface for the whole product. Headings used to be Geist while the
     UI was Inter -- two neutral geometric grotesques, too alike to read as
     deliberate contrast and different enough to read as an inconsistency.
     The token is kept (a lot of CSS points at it) but now resolves to the
     same stack as --font-ui; hierarchy comes from size and weight instead. */
  --font-heading: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius-panel: 12px;
  --radius-control: 8px;
  --focus-ring: #0f766e;
  /* One neutral hue. --bg and --muted are blue-cast; --line used to be
     #d7dfdc, which is green-cast, so a green-grey rule ran through every
     card, panel, row and pill of an otherwise blue-grey UI. --bg is also
     lifted a step so the page reads as paper rather than grey. */
  --bg: #fafbfc;
  --panel: #ffffff;
  --panel-soft: #f2f4f6;
  --ink: #191c1e;
  --muted: #515f74;
  --line: #e3e7ec;
  /* The hairline that bounds a control. --line (#e3e7ec on white) is
     1.24:1 -- WCAG 2.1 asks 3:1 of non-text UI, so every input, select
     and textarea in the app was failing. #828d9c measures 3.37:1.
     --line stays the divider between two surfaces, which has no bar. */
  --line-strong: #828d9c;
  --button: #0f766e;
  --button-hover: #115e59;
  --good: #059669;
  --warning: #d97706;
  --danger: #e11d48;
  /* Soft semantic tints. DESIGN.md documents these (success-soft,
     warning-soft, error-soft) but nothing declared them, so every soft
     pill in the app carried its own literal -- and the same amber was
     spelled three ways. Each role is a trio: -soft (fill), -ink (readable
     text on that fill) and -border. Use the trio for status pills and
     notices; the bare --good/--warning/--danger stay the strong accents. */
  --good-soft: #dcfce7;
  --good-ink: #047857;
  --good-border: #a7f3d0;
  --warning-soft: #fef3c7;
  --warning-ink: #92400e;
  --warning-border: #fcd9a4;
  --danger-soft: #ffe4e6;
  --danger-ink: #be123c;
  --danger-border: #fda4af;
  /* Blue = informational (DESIGN.md). Was only ever a bare #0284c7. */
  --info: #0284c7;
  --info-soft: #e0f2fe;
  --info-ink: #075985;
  --info-border: #bae6fd;
  /* Slate secondary action button -- a real third button rank next to the
     teal primary and the bordered white secondary. */
  --secondary: #334155;
  --secondary-hover: #1f2937;
  /* Palest teal, for a primary-tinted hover on a white control. */
  --button-soft: #f0fdfa;
  /* The label that sits ON a filled primary button. It was written as
     `color: var(--panel)` in 20 places, and as a bare #fff in others, because
     white happened to be the panel colour. Once --panel darkens, those labels
     darken with it and vanish -- and a search for white literals never finds
     them. This token is the fix: it is the ink for a coloured button, not the
     panel colour reused. */
  --button-ink: #ffffff;
  /* ...and the app has THREE filled button ranks, not one. The plan's matrix
     defines a single --button-ink, which works for the teal primary (whose
     dark-mode fill is light, so its ink goes dark) and is wrong for the other
     two: --navy stays dark in dark mode, and the danger fill inverts on a
     different hue. Each rank gets its own ink and its own fill. */
  --secondary-bg: #0d1c2f;
  --secondary-bg-hover: #1e293b;
  --secondary-ink: #ffffff;
  /* A disabled filled button. This was a hardcoded #aab1b5/#eef1f2 pair in
     global.css, which in dark mode painted a pale grey slab -- the brightest,
     most clickable-looking thing on the page. */
  --button-disabled: #aab1b5;
  --button-disabled-ink: #eef1f2;
  --danger-fill-ink: #ffffff;
  /* White that stays white. Three separate sweeps of this codebase each
     independently mapped these to --button-ink, and each would have been
     wrong: a casino monogram, a casino identity banner and a dark tooltip
     all sit on grounds that are dark in EVERY theme, so their ink must not
     invert. --button-ink goes #04231f in dark and would erase all of them.
     This is the plan's own trap, inverted -- and it is the one the plan
     does not warn about. */
  --on-dark-ink: #ffffff;
  /* The documented primary-container: a teal tint with enough body to
     carry a chip or a border, where --button-soft is only a hover wash. */
  --button-container: #ccfbf1;
  --navy: #0d1c2f;
  --surface-container: #edeef0;
  --surface-container-highest: #e1e2e4;
  --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  /* Scroll-under dissolve: how deep the fade under a pinned surface runs.
     Deep enough to kill the hard clip line, shallow enough that the card
     below is not visibly greyed -- an earlier 32px pass washed out a whole
     alert pill. One token so the nav, the Daily Bonus card and the ledger
     heads cannot drift apart. */
  --dissolve-depth: 20px;
  /* Type scale (DESIGN.md > typography). Round px expressed in rem so a
     reader's raised browser default still scales the whole product. */
  --type-headline-sm: 1.5rem;    /* 24 */
  --type-body-lg: 1.125rem;      /* 18 */
  --type-body-md: 1rem;          /* 16 */
  --type-body-sm: 0.875rem;      /* 14 */
  --type-label-caps: 0.75rem;    /* 12 */
  --type-mono: 0.9375rem;        /* 15 */
  --type-mono-sm: 0.6875rem;     /* 11 */

  /* Legacy names. Nine admin templates paint their cards with
     `var(--surface, #fff)` and `var(--border, #e5e7eb)` and nothing ever
     declared either one, so the fallback is what renders. Aliasing them here
     makes those pages follow the theme; it must land before their hand-rolled
     dark blocks are deleted, or they regress to white cards on a dark page. */
  --surface: var(--panel);
  --border: var(--line);
  --input-bg: var(--panel);
  /* A THIRD undefined legacy name, found the same way as --surface and
     and nothing declares it, so the fallback is what paints -- spelled three
     different ways. Declared at the value 55 of those 63 render today, so the
     common case is byte-identical; the other eight shift slightly and that is
     called out in the commit. Like --surface and --border, this has to exist
     before the admin templates' own dark blocks are deleted. */
  --text-muted: #6b7280;
  /* The admin pages are painted from a second palette that shares nothing with
     Quiet Precision -- a Tailwind-ish blue, red and green. Not worth restyling
     to ship dark mode, but its button labels do need an ink that stays white:
     --button-ink inverts to #04231f, which on the admin blue is 3.52:1 where
     white is 4.70:1. */
  --admin-accent: #2563eb;
  --admin-accent-ink: #ffffff;

  /* Chrome that is a surface, not a semantic colour. */
  --icon-plate: #ffffff;      /* the plate a casino favicon sits on */
  --banner-base: #1f2937;     /* the dark ground under a casino identity banner */
  --ident-bleed: rgba(255, 255, 255, 0.06);  /* identity wash over that banner */
  /* The pale wash behind a sorted ledger column. A literal here would stay
     pale on a dark page -- a bright band across the table. */
  /* A white veil laid over a tinted action card, to lift a metric tile or a
     row off the card's own colour. Written as a literal rgba() everywhere, in
     five slightly different alphas that no eye can tell apart -- and a white
     veil on a dark card is a pale slab, which is exactly how the dashboard's
     Redeemable/Threshold tiles rendered before this existed. The five alphas
     are consolidated into two tiers; that is a visible change of a percent or
     two in light mode, and it is the reason this is not in a parity commit. */
  --card-veil: rgba(255, 255, 255, 0.72);
  /* The translucent grey a ledger toolbar or a sticky table head is washed
     with. Same problem as --card-veil in reverse: it is --panel-soft's value
     at an alpha, so on a dark page it painted a bright band right across the
     table. Five alphas between 0.48 and 0.9 are consolidated into two. */
  --pane-veil: rgba(242, 244, 246, 0.62);
  --pane-veil-strong: rgba(242, 244, 246, 0.9);
  --card-veil-strong: rgba(255, 255, 255, 0.88);
  /* The three topbar CTA pills. Their light values are byte-identical to the
     action-card expire/play registers, but they are topbar buttons rather than
     card states, so they get their own names instead of borrowing those. */
  --qa-purchase-bg: #fff1f2;
  --qa-purchase-bd: #fecdd3;
  --qa-wager-bg: #eff6ff;
  --qa-wager-bd: #bfdbfe;
  --qa-wager-ink: #2563eb;
  --qa-redeem-bg: #ecfdf5;
  --sort-tint: #dbe6e3;
  --skel-a: #f1f3f5;          /* loading shimmer, low */
  --skel-b: #e9ecef;          /* loading shimmer, high */

  /* Action-card family. Six card states each carry a tinted surface, a border,
     an icon tile and an ink. They were literals in action-dashboard.css, which
     is why that one file held 383 of them. Note freebie_available has NO
     tinted surface in light mode -- it sits on the plain panel with an amber
     badge -- so it declares a tile and an ink and nothing else. */
  --ac-redeem-bg: #f0fdf6;
  --ac-redeem-bd: #a7f3d0;
  --ac-redeem-tile: #d1fae5;
  --ac-redeem-ink: #047857;
  --ac-bonus-bg: #f5f3ff;
  --ac-bonus-bd: #ddd6fe;
  --ac-bonus-tile: #ede9fe;
  --ac-bonus-ink: #6d28d9;
  --ac-play-bg: #eff6ff;
  --ac-play-bd: #bfdbfe;
  --ac-play-tile: #dbeafe;
  --ac-play-ink: #1d4ed8;
  --ac-expire-bg: #fff1f2;
  --ac-expire-bd: #fecdd3;
  --ac-expire-tile: #ffe4e6;
  --ac-expire-ink: #be123c;
  --ac-noanchor-bg: #f8fafc;
  --ac-noanchor-bd: #e2e8f0;
  --ac-noanchor-tile: #e2e8f0;
  --ac-noanchor-ink: #475569;
  --ac-winddown-bg: #fffbeb;
  --ac-winddown-bd: #fcd34d;
  --ac-winddown-tile: #fef3c7;
  --ac-winddown-ink: #b45309;
  --ac-freebie-tile: #fef3c7;
  --ac-freebie-ink: #b45309;

  /* Casino detail modal. These eight used to be literals in a --cdm-* block
     inside casino-detail-modal.css, kept as literals on purpose because they
     are near-misses against the token they resemble and snapping them would
     move pixels. That was fine while there was one theme; it is what painted
     the modal's balance boxes, its bonus row and its "Settings, Expiration &
     Links" row a flat white in dark mode. The light values below are the
     original literals to the digit, so light is unchanged -- they are here
     only so the dark and OLED blocks have something to redefine. */
  --cdm-surface-low: #fafafa;
  --cdm-surface-container: #f6f7f8;
  --cdm-body: #374151;
  --cdm-faint: #94a3b8;
  /* Section chevrons: bigger and darker than --cdm-faint so "this opens" is
     findable at a glance (design, 14 Sep 2026). */
  --cdm-chevron: #64748b;
  --cdm-line: #e6e8eb;
  --cdm-line-soft: #f1f2f4;
  --cdm-success-ink: #065f46;
  /* The user's own notes get a teal surface, not amber: yellow reads as
     caution, and a personal note is not a warning. */
  --cdm-note-bg: #f5fbfa;
  --cdm-note-border: #cde7e1;

  /* The "we don't know this yet" action card and its answer controls
     (.daily_bonus_unknown, .ct-gap-*). This family was written entirely in
     literals and never converted, so in dark mode the card stayed a pale blue
     slab under near-white --ink text -- the one surface where the question we
     are asking was the hardest thing on the page to read. */
  --gap-cadence-bg: #f5fbff;
  --gap-cadence-ink: #0369a1;
  --slate-badge-bg: #eef2f7;
  --slate-badge-bd: #cbd5e1;
  --gap-control-bd: #d9dde3;
  --slate-ink: #334155;
  --gap-quiet-ink: #4b5563;
  --gap-quiet-hover: #f3f4f6;
  --gap-accent-bd: #7dd3fc;
  --gap-dot-bd: #94a3b8;
  --gap-dot-core: #e0f2fe;
  --gap-unit-bg: #fafafa;
  --gap-unit-bd: #e6e8eb;

  /* The three action-card registers that had no trio of their own and were
     therefore written as bare literals everywhere they appeared: a freebie
     whose tier is "corroborated" (orange), a freebie that is a sale (fuchsia),
     the cyan a freebie's secondary button borrows, and the pale teal edge of a
     discovery suggestion. Light values are the original literals. */
  --ac-corrob-bd: #fdba74;
  --ac-corrob-bg: #ffedd5;
  --ac-corrob-ink: #c2410c;
  --ac-sale-bd: #f0abfc;
  --ac-sale-bg: #fae8ff;
  --ac-sale-ink: #a21caf;
  --ac-cyan-bd: #a5f3fc;
  --ac-cyan-ink: #0e7490;
  --ac-suggest-bd: #99f6e4;

  /* Announcement surfaces (banner card + focus sheet). These four grounds and
     two borders used to be literals in a :root block inside announcements.css,
     which meant they never inverted: in dark mode the banner stayed a pale
     card while its title kept --ink, so the heading read as a washed-out,
     near-invisible line on pink. They live here now, like every other tinted
     surface, so the tone repaints with the theme.
     The action and resolved tints have no -soft counterpart to borrow: the
     -soft tokens are pill fills and too saturated to spread over a card. */
  --ann-info-tint: #eef4f3;
  --ann-info-border: #dbe7e4;
  --ann-action-tint: #fdf7ec;
  --ann-resolved-tint: #f0faf4;
  --ann-critical-tint: #fff1f2;
  --ann-critical-border: #fecdd3;
}

/* ===========================================================================
   Dark and OLED.

   Rules of this file, both learned the hard way:

   1. Every token is DECLARED in the bare :root above and only REDEFINED here.
      A colour whose only definition lives inside a theme block falls back to
      nothing, and the failure is silent -- it gave the OLED redeem card a
      near-white surface while the specimen was being built. tests/test_theme_
      tokens.py fails the build if a token appears here and not above.

   2. Each block sets `color-scheme` as well as custom properties.
      color-scheme is the only thing that themes browser-rendered controls --
      selects, date pickers, checkboxes, radios, scrollbars, form autofill.
      Custom properties do not reach any of them.

   OLED is true black on the page but NOT on the cards (#0a0e14). If the cards
   were black too every edge would vanish and the layout would flatten into one
   sheet; the page ground is where nearly all the pixels are on a phone, so the
   battery saving survives. And OLED ink is #dbe0e6, not white: pure white on
   pure black measures 21:1, which haloes and smears on scroll where 15.8:1
   does not.

   Every value with a contrast requirement was measured against the surface it
   actually sits on, to WCAG 2.1 -- 4.5:1 for text, 3:1 for non-text UI. The
   matrix and the measurements are in DARK_MODE_PLAN.md; tests/test_theme_
   tokens.py recomputes them from this file on every run.
   =========================================================================== */

/* There is deliberately NO `@media (prefers-color-scheme: dark)` block here,
   and that is a gate rather than a simplification.

   Dark mode is staged to testers through the `dark_mode` feature flag, and a
   flag can only gate what the server decides to send. A media query is not
   something the server sends -- it is in this stylesheet for everybody, and it
   would have handed a dark page to every reader on a dark OS whether or not
   their account had the flag. There would have been no way to hold it back
   short of shipping two stylesheets.

   So the only way into a dark palette is the `data-theme` attribute below, and
   the only thing that ever sets it is the resolver (theme.py), which the
   server emits only for an account the flag is on for. No script, no
   attribute, no dark. That coupling IS the gate; do not add a media query here
   without moving the gate somewhere it still holds.

   Nothing is lost by it: the resolver reads `prefers-color-scheme` itself and
   runs in <head> before the stylesheet links, so an OS-dark reader with the
   flag lands on dark before first paint exactly as the media query would have
   done. A reader with JavaScript off now stays light -- which is the honest
   outcome, since the switch that chooses a theme is JavaScript too. */

/* An explicit Dark choice beats a light OS. Same values as the block above;
   they are spelled out rather than shared because a media query and an
   attribute selector cannot be combined into one rule. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Constant across themes, like --navy: the grounds these sit on -- a casino
     identity colour, the identity banner, a dark tooltip -- do not follow the
     page, so their ink must not follow it either. */
  --on-dark-ink: #ffffff;
  /* Constant across themes: the admin pages keep their own accent, and its
     label must stay white -- --button-ink would invert it onto a blue that
     does not lift. */
  --admin-accent: #2563eb;
  --admin-accent-ink: #ffffff;
  --text-muted: #94a3b8;

  --bg: #0f141c;
  --panel: #111827;
  --panel-soft: #1a2230;
  --ink: #e5e7eb;
  --muted: #94a3b8;
  --line: #374151;
  --line-strong: #64748b;
  --button: #5eada6;
  --button-hover: #7cc3bc;
  --button-ink: #04231f;
  --button-soft: #16302e;
  --button-container: #16302e;
  --focus-ring: #5eead4;
  --secondary: #cbd5e1;
  --secondary-hover: #e2e8f0;
  --secondary-bg: #64748b;
  --secondary-bg-hover: #556174;
  --secondary-ink: #ffffff;
  --button-disabled: #2f3947;
  --button-disabled-ink: #9fabbd;
  --danger-fill-ink: #2d0910;
  --good: #34d399;
  --good-soft: #0d2a1f;
  --good-ink: #6ee7b7;
  --good-border: #14532d;
  --warning: #fbbf24;
  --warning-soft: #2a1f0d;
  --warning-ink: #fcd34d;
  --warning-border: #78350f;
  --danger: #fb7185;
  --danger-soft: #2d1117;
  --danger-ink: #fda4af;
  --danger-border: #7f1d1d;
  --info: #38bdf8;
  --info-soft: #0c2233;
  --info-ink: #7dd3fc;
  --info-border: #075985;
  --icon-plate: #e8eaed;
  --banner-base: #1f2937;
  --ident-bleed: rgba(255, 255, 255, 0.10);
  --card-veil: rgba(255, 255, 255, 0.05);
  --pane-veil: rgba(26, 34, 48, 0.62);
  --pane-veil-strong: rgba(26, 34, 48, 0.92);
  --card-veil-strong: rgba(255, 255, 255, 0.09);
  --qa-purchase-bg: #261014;
  --qa-purchase-bd: #cc4a68;
  --qa-wager-bg: #0d1b2f;
  --qa-wager-bd: #4183cc;
  --qa-wager-ink: #93c5fd;
  --qa-redeem-bg: #0b1f18;
  --sort-tint: #182430;
  --skel-a: #1a2230;
  --skel-b: #232d3d;
  /* Deliberately constant across themes. --navy is a scrim -- a dark wash
     over an image (knowledge-base.css uses it through color-mix) -- not a
     surface that follows the page. The secondary BUTTON that used to be
     painted with it now has its own --secondary-bg, which does invert. */
  --navy: #0d1c2f;
  --surface-container: #1f2937;
  --surface-container-highest: #2a3340;
  --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --ac-redeem-bg: #0b1f18;
  --ac-redeem-bd: #2f9970;
  --ac-redeem-tile: #14532d;
  --ac-redeem-ink: #6ee7b7;
  --ac-bonus-bg: #17132b;
  --ac-bonus-bd: #8065d6;
  --ac-bonus-tile: #33265e;
  --ac-bonus-ink: #c4b5fd;
  --ac-play-bg: #0d1b2f;
  --ac-play-bd: #4183cc;
  --ac-play-tile: #1e3a68;
  --ac-play-ink: #93c5fd;
  --ac-expire-bg: #261014;
  --ac-expire-bd: #cc4a68;
  --ac-expire-tile: #5e1a2a;
  --ac-expire-ink: #fda4af;
  --ac-noanchor-bg: #151a22;
  --ac-noanchor-bd: #5b6b80;
  --ac-noanchor-tile: #2a3340;
  --ac-noanchor-ink: #cbd5e1;
  --ac-winddown-bg: #2e2205;
  --ac-winddown-bd: #b45309;
  --ac-winddown-tile: #4d3608;
  --ac-winddown-ink: #fcd34d;
  --ac-freebie-tile: #4d3608;
  --ac-freebie-ink: #fcd34d;
  --ann-info-tint: #11211f;
  --ann-info-border: #2a4a45;
  --ann-action-tint: #2a2006;
  --ann-resolved-tint: #0b1f18;
  --ann-critical-tint: #261014;
  --ann-critical-border: #5e1a2a;
  --cdm-surface-low: #151b24;
  --cdm-surface-container: #1a2230;
  --cdm-body: #cbd5e1;
  --cdm-faint: #94a3b8;
  --cdm-chevron: #94a3b8;
  --cdm-line: #374151;
  --cdm-line-soft: #242c38;
  --cdm-success-ink: #6ee7b7;
  --cdm-note-bg: #14262a;
  --cdm-note-border: #2a4a45;
  --gap-cadence-bg: #0d1b2f;
  --gap-cadence-ink: #7dd3fc;
  --slate-badge-bg: #2a3340;
  --slate-badge-bd: #5b6b80;
  --gap-control-bd: #475569;
  --slate-ink: #cbd5e1;
  --gap-quiet-ink: #cbd5e1;
  --gap-quiet-hover: #2a3340;
  --gap-accent-bd: #4183cc;
  --gap-dot-bd: #64748b;
  --gap-dot-core: #0b1a29;
  --gap-unit-bg: #1a2230;
  --gap-unit-bd: #374151;
  --ac-corrob-bd: #b45309;
  --ac-corrob-bg: #3a1d06;
  --ac-corrob-ink: #fdba74;
  --ac-sale-bd: #8b3fa0;
  --ac-sale-bg: #2a1030;
  --ac-sale-ink: #f0abfc;
  --ac-cyan-bd: #2a7b8c;
  --ac-cyan-ink: #67e8f9;
  --ac-suggest-bd: #2f7a72;
}

/* True black, for an OLED screen. Reached by the resolver, never by the OS:
   no browser can report that a panel is OLED, so it cannot be detected --
   only the screen's WIDTH can. Dark mode therefore defaults to this on
   phone-width screens and to the lifted grey above on desktop, with a
   per-device override in Settings either way. */
:root[data-theme="oled"] {
  color-scheme: dark;

  /* Constant across themes, like --navy: the grounds these sit on -- a casino
     identity colour, the identity banner, a dark tooltip -- do not follow the
     page, so their ink must not follow it either. */
  --on-dark-ink: #ffffff;
  /* Constant across themes: the admin pages keep their own accent, and its
     label must stay white -- --button-ink would invert it onto a blue that
     does not lift. */
  --admin-accent: #2563eb;
  --admin-accent-ink: #ffffff;
  --text-muted: #94a3b8;

  --bg: #000000;
  --panel: #0a0e14;
  --panel-soft: #12171f;
  --ink: #dbe0e6;
  --muted: #94a3b8;
  --line: #2a323d;
  --line-strong: #64748b;
  --button: #5eada6;
  --button-hover: #7cc3bc;
  --button-ink: #04231f;
  --button-soft: #122b29;
  --button-container: #122b29;
  --focus-ring: #5eead4;
  --secondary: #cbd5e1;
  --secondary-hover: #e2e8f0;
  --secondary-bg: #64748b;
  --secondary-bg-hover: #556174;
  --secondary-ink: #ffffff;
  --button-disabled: #1c232c;
  --button-disabled-ink: #9fabbd;
  --danger-fill-ink: #2d0910;
  --good: #34d399;
  --good-soft: #08211a;
  --good-ink: #6ee7b7;
  --good-border: #10412a;
  --warning: #fbbf24;
  --warning-soft: #221909;
  --warning-ink: #fcd34d;
  --warning-border: #5e2a0c;
  --danger: #fb7185;
  --danger-soft: #250d12;
  --danger-ink: #fda4af;
  --danger-border: #661717;
  --info: #38bdf8;
  --info-soft: #081a29;
  --info-ink: #7dd3fc;
  --info-border: #064565;
  --icon-plate: #e8eaed;
  --banner-base: #161c26;
  --ident-bleed: rgba(255, 255, 255, 0.10);
  --card-veil: rgba(255, 255, 255, 0.04);
  --pane-veil: rgba(18, 23, 31, 0.62);
  --pane-veil-strong: rgba(18, 23, 31, 0.92);
  --card-veil-strong: rgba(255, 255, 255, 0.07);
  --qa-purchase-bg: #1a0b0e;
  --qa-purchase-bd: #cc4a68;
  --qa-wager-bg: #081222;
  --qa-wager-bd: #4183cc;
  --qa-wager-ink: #93c5fd;
  --qa-redeem-bg: #071510;
  --sort-tint: #111c26;
  --skel-a: #12171f;
  --skel-b: #1b222c;
  /* Deliberately constant across themes. --navy is a scrim -- a dark wash
     over an image (knowledge-base.css uses it through color-mix) -- not a
     surface that follows the page. The secondary BUTTON that used to be
     painted with it now has its own --secondary-bg, which does invert. */
  --navy: #0d1c2f;
  --surface-container: #161c26;
  --surface-container-highest: #202833;
  --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
  --ac-redeem-bg: #071510;
  --ac-redeem-bd: #2f9970;
  --ac-redeem-tile: #104023;
  --ac-redeem-ink: #6ee7b7;
  --ac-bonus-bg: #0f0c1d;
  --ac-bonus-bd: #8065d6;
  --ac-bonus-tile: #281d4a;
  --ac-bonus-ink: #c4b5fd;
  --ac-play-bg: #081222;
  --ac-play-bd: #4183cc;
  --ac-play-tile: #172d52;
  --ac-play-ink: #93c5fd;
  --ac-expire-bg: #1a0b0e;
  --ac-expire-bd: #cc4a68;
  --ac-expire-tile: #4a1421;
  --ac-expire-ink: #fda4af;
  --ac-noanchor-bg: #0d1117;
  --ac-noanchor-bd: #5b6b80;
  --ac-noanchor-tile: #202833;
  --ac-noanchor-ink: #cbd5e1;
  --ac-winddown-bg: #221903;
  --ac-winddown-bd: #b45309;
  --ac-winddown-tile: #3d2b06;
  --ac-winddown-ink: #fcd34d;
  --ac-freebie-tile: #3d2b06;
  --ac-freebie-ink: #fcd34d;
  --ann-info-tint: #0a1817;
  --ann-info-border: #21403c;
  --ann-action-tint: #221903;
  --ann-resolved-tint: #071510;
  --ann-critical-tint: #1a0b0e;
  --ann-critical-border: #4a1421;
  --cdm-surface-low: #0d1117;
  --cdm-surface-container: #12171f;
  --cdm-body: #cbd5e1;
  --cdm-faint: #94a3b8;
  --cdm-chevron: #94a3b8;
  --cdm-line: #2a323d;
  --cdm-line-soft: #1a202a;
  --cdm-success-ink: #6ee7b7;
  --cdm-note-bg: #0c1d20;
  --cdm-note-border: #21403c;
  --gap-cadence-bg: #081222;
  --gap-cadence-ink: #7dd3fc;
  --slate-badge-bg: #202833;
  --slate-badge-bd: #5b6b80;
  --gap-control-bd: #475569;
  --slate-ink: #cbd5e1;
  --gap-quiet-ink: #cbd5e1;
  --gap-quiet-hover: #202833;
  --gap-accent-bd: #4183cc;
  --gap-dot-bd: #64748b;
  --gap-dot-core: #05101c;
  --gap-unit-bg: #12171f;
  --gap-unit-bd: #2a323d;
  --ac-corrob-bd: #b45309;
  --ac-corrob-bg: #2e1604;
  --ac-corrob-ink: #fdba74;
  --ac-sale-bd: #8b3fa0;
  --ac-sale-bg: #200b26;
  --ac-sale-ink: #f0abfc;
  --ac-cyan-bd: #2a7b8c;
  --ac-cyan-ink: #67e8f9;
  --ac-suggest-bd: #2f7a72;
}