/*
* tokens.css — the SINGLE SOURCE OF TRUTH for the design-token palette (WEB-S2b / CLAUDE.md §2b).
*
* The `:root` token system (color, ink scale, type/space scales, radii, shadows, gradients, status
* tints) + the dark-mode palette swap. It was duplicated byte-for-byte into the extension's
* dashboard.html and apps/web's web.html; both now `` this ONE file so a token edit lands in
* every surface at once. Each app's build (scripts/build.mjs) copies this file next to its host HTML
* in dist/ as `tokens.css`. Raw hex/px live ONLY here, in the `:root` definitions — never inline
* (stylelint's declaration-strict-value is the teeth). The runtime stamps `data-theme` on ; the
* `:root[data-theme="dark"]` block makes dark mode a pure palette swap, no media-query duplication.
*/
:root {
/* Horizon design system (EPIC HORIZON, S1) — cold blue-cast canvas, ONE azure interaction accent,
green reserved for MONEY only, soft radii, two shadow elevations. Per the BROAD-F1 precedent this
is a VALUE-SWAP, not a rename: every existing token NAME is kept (so all ~899 component rules
recolor at once) but revalued to its Horizon equivalent, and the Horizon CANONICAL tokens
(--ink-900.., --azure*, --money*, --ember*, --r-*, --lift*) are ADDED so new Horizon components
reference them and the old names alias to them (e.g. `--ink: var(--ink-900)`). Raw hex lives ONLY
here in :root (stylelint declaration-strict-value is the teeth). Light-only in this slice — the
dark block below is LEFT AS-IS (warm) and re-derived as cold-navy in a follow-up (HORIZON-DARK). */
/* Horizon canonical tokens (verbatim from docs/DESIGN-LANGUAGE-HORIZON.html :root). */
--ink-900: #0e1826;
--ink-700: #33415c;
--ink-500: #5e6e87; /* A11Y-CRUMB-CONTRAST-1 — 4.44:1 on --canvas failed AA (axe-confirmed, 9 nodes).
#5e6e87 = 4.86:1 there, >=4.60 on both proven grounds, >=4.50 on every
declared ground (worst --ember-tint 4.51). hsl 217.7/17.7%/47.6% -> 44.9%. */
--ink-300: #9aa8bf;
--hairline: #e4eaf2;
--hairline-lo: #eef2f8;
--canvas: #f5f8fc;
--azure: #2e6be6;
--azure-deep: #2456c4;
--azure-tint: #e9f0fd;
--money: #178a5b;
--money-deep: #0f6b46;
--money-tint: #e4f3ec;
--ember: #d4552f;
--ember-tint: #fdece5;
--amber-tint: #fbf1df;
--slate-tint: #eef2f8;
/* atmosphere ramps — imagery only, never UI chrome (wired in a later slice) */
--sky-day-a: #8fb8ee;
--sky-day-b: #eaf3fd;
--sky-dawn-a: #ffe8c7;
--sky-dawn-b: #bfd5f4;
--sky-dusk-a: #ffb199;
--sky-dusk-b: #6d7fb8;
--sky-night-a: #22355c;
--sky-night-b: #0e1826;
--r-1: 12px;
--r-2: 18px;
--r-3: 26px;
--lift:
inset 0 1px 0 #fff, 0 1px 2px rgb(14, 24, 38, 0.04), 0 20px 44px -22px rgb(14, 24, 38, 0.2);
--lift-lo:
inset 0 1px 0 #fff, 0 1px 2px rgb(14, 24, 38, 0.04), 0 10px 24px -14px rgb(14, 24, 38, 0.14);
/* Existing names, revalued to Horizon (alias to canonical where one exists). */
--bg: var(--canvas);
--bg-2: var(--hairline-lo);
--sunken: var(--hairline-lo);
--skeleton: var(--hairline);
--surface: #fff;
--tile-2: #f9fbfe;
--ink: var(--ink-900);
--ink-2: var(--ink-700);
--ink-3: var(--ink-500);
--line: var(--hairline);
--hair: var(--hairline);
--hair-strong: #cbd5e4;
--line-2: var(--hairline-lo);
--navy: var(--ink-900);
--navy-2: var(--ink-700);
/* THE ONE ACCENT (Horizon): `--blue`/`--accent-fill` carry INTERACTION in azure — links, active
tab, focus, switches, accent icons/ticks. The filled button uses the DARKER `--azure-deep` via
`--accent-down` so its white text clears WCAG AA (bright `--azure` ~4.0:1 is for fills/links).
`--green`/`--pos` are MONEY-POSITIVE (Horizon green, used for money ONLY); `--warn` aliases amber
and `--neg` aliases ember (urgency: now) for money/status tone. */
--blue: var(--azure);
--blue-bg: var(--azure-tint);
--green: var(--money);
--green-bg: var(--money-tint);
--pos: var(--money);
--pos-tint: var(--money-tint);
--accent-fill: var(--azure);
--accent-fill-hover: var(--azure-deep);
--accent-ink: var(--azure-deep);
--accent-down: var(--azure-deep);
--amber: #c77e1f;
--amber-bg: var(--amber-tint);
--warn: var(--amber);
--warn-tint: var(--amber-tint);
--red: var(--ember);
--red-bg: var(--ember-tint);
--neg: var(--ember);
--neg-tint: var(--ember-tint);
--stamp: var(--ink-900);
--stamp-ink: var(--canvas);
--grey-bg: var(--hairline-lo);
/* category tints — Horizon §02 bans pastel tint tiles as chrome; the per-category signal is now the
soft-3D still-life VIGNETTE imagery (HORIZON-S2 `categoryVignette`, wired into the credit-history
`.catchip`). The retired warm sage/peach/lilac pairs are DELETED (HORIZON-S4) — every surface that
signalled category now uses a vignette, so no `var(--sage|--peach|--lilac)` remains. --sky survives:
it is the azure interaction family (`.tile-tint--sky`/`.chip-tint--sky`), not a retired pastel. */
--sky: var(--azure-tint);
--sky-ink: var(--azure-deep);
/* status tints: each callout variant has a border tint, a deep heading, and body text */
--red-border: #f2cdbe;
--amber-border: #ecd6ae;
--blue-border: #cfe0f7;
--amber-head: #8f5a12;
--blue-head: var(--azure-deep);
--red-text: #a33d1e;
--amber-text: #8f5a12;
--blue-text: var(--azure-deep);
/* extended palette — every colour used in a rule has a name here (HYG-5, no raw hex) */
--white: #fff;
--ink-4: var(--ink-300);
--slate: #5e6e87; /* A11Y-CRUMB-CONTRAST-1 (D-6) — keeps --slate == resolved --ink-3; fixes
.pill.static/.pill.access (was 4.21:1 on --grey-4, now 4.61:1). */
--grey-1: var(--ink-300);
--grey-2: var(--hair-strong);
--grey-3: var(--hairline);
--grey-4: var(--hairline-lo);
--grey-5: var(--hairline-lo);
--red-strong: var(--ember);
--red-bg-2: var(--ember-tint);
--red-tint: var(--ember-tint);
--red-border-2: #f2cdbe;
--green-low: #9ec9b4;
--green-border: #bfe2d0;
--blue-bright: var(--azure);
--blue-deep: var(--azure-deep);
--blue-link: var(--azure);
--brand-accent: var(--azure);
--blue-bg-2: var(--azure-tint);
--blue-border-2: #cfe0f7;
/* alpha overlays for dark/branded surfaces */
--on-dark-08: rgb(255, 255, 255, 0.08);
--on-dark-14: rgb(255, 255, 255, 0.14);
--on-dark-16: rgb(255, 255, 255, 0.16);
--on-dark-18: rgb(255, 255, 255, 0.18);
--on-dark-22: rgb(255, 255, 255, 0.22);
--on-dark-28: rgb(255, 255, 255, 0.28);
--on-dark-60: rgb(255, 255, 255, 0.6);
--on-dark-86: rgb(255, 255, 255, 0.86);
--money-glow: rgb(23, 138, 91, 0.5);
--money-glow-strong: rgb(23, 138, 91, 0.55);
--ink-wash-05: rgb(14, 24, 38, 0.05);
--ink-wash-10: rgb(14, 24, 38, 0.1);
--scrim: rgb(14, 24, 38, 0.32);
--shadow-pop: rgb(14, 24, 38, 0.16);
--shadow-drawer: rgb(14, 24, 38, 0.18);
--ring-blue: rgb(46, 107, 230, 0.16);
/* Horizon §04: exactly TWO shadow elevations — cool, cast straight down, top-lit. The four legacy
shadow names collapse onto them (--shadow-sm/--shadow → elevation 1, --shadow-lg/--shadow-xl →
elevation 2) so every existing box-shadow rule adopts the Horizon depth at once. */
--shadow-sm: var(--lift-lo);
--shadow: var(--lift-lo);
--shadow-lg: var(--lift);
--shadow-xl: var(--lift);
/* Horizon studio sweep — the sign-in/hero backdrop: a soft cool vertical wash over the surface
(replaces the retired warm sage+peach aurora; name kept to avoid a cross-file sweep). */
--aurora-warm: linear-gradient(180deg, #ccdcf4 0%, #f4f8fd 100%), var(--surface);
/* the money-number halo — a faint green glow behind a focal figure (reads through --money-glow,
tuned to the Horizon money green). */
--glow-text: 0 2px 16px var(--money-glow);
--ring: 0 0 0 1px rgb(14, 24, 38, 0.05);
/* Horizon type (§03): Inter Tight (`--font-sans`) is the grotesque for display/heading/body/UI —
KEPT as the shipped, self-hosted, OFL body face (owner decision 2026-07-14). `--serif` is the ONE
serif accent — Instrument Serif (self-hosted italic, SIL OFL) — used ONLY for the italic aside /
hero `` (wired per-component in a later slice), NOT body/UI. `--mono` sets data/serials. */
--serif: "Instrument Serif", Georgia, "Times New Roman", serif;
--font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, monospace;
--w: 450;
--w6: 620;
--text-xs: 11px;
--text-sm: 12.5px;
--text-md: 14px;
--text-lg: 16px;
--text-xl: 20px;
--text-2xl: 26px;
--text-3xl: 34px;
--text-4xl: 42px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 22px;
--space-6: 32px;
/* Horizon radii (§04): soft — controls 12px, cards 18px, heroes/sheets 26px. The legacy radius
names alias onto them; --radius-sm/--radius-xs collapse to ONE compact 8px radius. */
--radius-lg: var(--r-2);
--radius: var(--r-1);
--radius-sm: 8px;
--radius-xs: var(--radius-sm);
/* Motion (VELVET-5): the complete Horizon timing vocabulary. Raw timing curves and durations live
only here; every component and popup motion declaration consumes this scale. */
--t-1: 120ms;
--t-2: 180ms;
--t-3: 240ms;
--t-4: 600ms;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
/* iOS safe-area insets (IOS-RESP): the notch/home-indicator/rounded-corner gutters. Named here so
the sticky top bar + bottom tab bar on the phone layout (the web build the iOS app embeds) clear
the notch + home indicator. They resolve to 0 on every non-notched surface (desktop, extension
tab), so referencing them is always safe; the inset only grows the gutter where the OS reports one. */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
/* the mobile bottom tab-bar height (sans safe-area) — the stacked content reserves this much
bottom padding so the sticky nav never overlaps the last row. */
--tabbar-h: 56px;
/* OAuth one-tap buttons (PV2-1.1): Apple = solid black, Google = bordered white (their brand
guidelines). Tokenised so the palette stays the single source of truth. */
--oauth-apple-bg: #000;
--oauth-apple-ink: #fff;
--oauth-google-bg: #fff;
--oauth-google-ink: #1f1f1f;
/* Owner-avatar palette (RD-39, AUD-44): the deterministic per-owner initial colours, sourced here so
the palette is the single source of truth. Horizon recolours these cool-cast while keeping 6
visually DISTINCT hues (owner avatars are preserved, §0.2) — each dark enough for white initials. */
--avatar-1: #1f7a5c;
--avatar-2: #4d6a8a;
--avatar-3: #2456c4;
--avatar-4: #2f8f9e;
--avatar-5: #6558b8;
--avatar-6: #b0522f;
/* --grad-money stays GREEN (money hero) — Horizon keeps green for money only; reconciled to the
Horizon money tokens. --grad-navy is the ink-deep hero (ink-700 → ink-900). */
--grad-money: linear-gradient(135deg, var(--money) 0%, var(--money-deep) 100%);
--grad-navy: linear-gradient(120deg, var(--ink-700) 0%, var(--ink-900) 100%);
/* Card-art ramps (GRAPHIC-KIT) — per-product face gradients for the inline-SVG credit-card art.
Each product family gets an `-a` (top-left) → `-b` (bottom-right) pair; the UI's card-art.ts maps
a product NAME to a ramp KEY (the issuer/product name lives in the UI layer, never in @bt/core), so
the raw hex stays here in :root and the component only references `var(--card--a/-b)`.
platinum → cool graphite/silver · gold → warm gold · sapphire → deep navy→blue ·
green (money default) · onyx (dark charcoal fallback for an unknown product). */
--card-platinum-a: #5b6572;
--card-platinum-b: #2f3641;
--card-gold-a: #c99a4a;
--card-gold-b: #8a6220;
--card-sapphire-a: #2e4d86;
--card-sapphire-b: #16213f;
--card-green-a: #2f8f6b;
--card-green-b: #17503b;
--card-rose-a: #b5624a;
--card-rose-b: #7a3423;
--card-onyx-a: #3a3f47;
--card-onyx-b: #1c1f24;
/* the guilloché line texture + engraved wordmark/last-4 ink on a card face — a translucent white so
it reads on every ramp. Foil = a brighter hairline for the chip contacts + top edge. */
--card-ink: rgb(255, 255, 255, 0.92);
--card-ink-soft: rgb(255, 255, 255, 0.62);
--card-line: rgb(255, 255, 255, 0.14);
--card-foil: rgb(255, 255, 255, 0.5);
/* the EMV chip metal — a warm brushed-gold gradient reused across every ramp. */
--card-chip-a: #e7cf8f;
--card-chip-b: #b48f3e;
/* Texture/depth (GRAPHIC-KIT §3): a fractal-noise turbulence tile as a data-URI, laid at low opacity
by `.grain` for a subtle paper grain over flat surfaces. Encoded once here so the SVG filter isn't
duplicated across surfaces. */
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
/* an inner glass-highlight hairline — a bright top edge that makes a dark/gradient surface read as a
lit pane rather than a flat fill. Applied to the money hero + the loyalty navy hero. */
--inset-hi: inset 0 1px 0 var(--white);
}
/* Cold-navy dark mode (VELVET-12): the token system makes this a palette swap — every rule already
reads var(--token), so only :root changes. This is a TEMPERATURE swap to cold-navy (the pre-Horizon
RD-61 dark was a WARM charcoal; AR72-HZN-1 fixed readability/parity but explicitly NOT the palette).
Ink-deep navy surfaces from the §05 night ramp (--bg #10192b → --surface #182440), azure as the ONE
interaction accent (lightened for on-navy contrast — links #6b96f0, the route-hero eyebrow #7fa5f4),
money-green kept for MONEY only, ember/amber status tints re-derived on navy. `--accent-fill`/
`--accent-fill-hover`/`--accent-down` are deliberately NOT overridden here — they inherit the light
AZURE interaction scale so the AA-safe filled button (white text on `--azure-deep` = 6.56:1) reads
identically in dark. The runtime sets `data-theme` on to the RESOLVED theme — "dark"/"light",
or the OS preference for "auto". WCAG floors verified in tokens-dark.test.ts. */
:root[data-theme="dark"] {
--bg: #10192b;
--bg-2: #16213a;
--sunken: #16213a;
--skeleton: #1e2c4d;
--surface: #182440;
--tile-2: #14203a;
--ink: #e8eef8;
--ink-2: #b6c2d9;
--ink-3: #8595b3;
--ink-4: #5a6a8a;
--line: #243352;
--hair: #243352;
--hair-strong: #31436b;
--line-2: #1c2946;
--grey-bg: #1c2946;
--navy: #0b1322;
--navy-2: #1c2a4a;
--blue: #6b96f0;
--blue-bg: #14264d;
--accent-ink: #7fa5f4;
--green: #3fae7e;
--green-bg: #123528;
--pos: #3fae7e;
--pos-tint: #123528;
--amber: #e0a94e;
--amber-bg: #2c2413;
--warn: #e0a94e;
--warn-tint: #2c2413;
--red: #e8795a;
--red-bg: #3a1e15;
--neg: #e8795a;
--neg-tint: #3a1e15;
--stamp: #e8eef8;
--stamp-ink: #10192b;
/* retired pastel category tints (--sage/--peach/--lilac) DELETED in HORIZON-S4 — see the light block;
--sky stays as the azure interaction family (azure-tint on navy). */
--sky: #14264d;
--sky-ink: #6b96f0;
--red-border: #4d2a1c;
--amber-border: #453a1d;
--blue-border: #2a3f6b;
--amber-head: #eec078;
--blue-head: #6b96f0;
--red-text: #f0987e;
--amber-text: #eec078;
--blue-text: #6b96f0;
--slate: #8595b3;
--grey-1: #5a6a8a;
--grey-2: #31436b;
--grey-3: #243352;
--grey-4: #1c2946;
--grey-5: #16213a;
--red-strong: #e8795a;
--red-bg-2: #3a1e15;
--red-tint: #3a1e15;
--red-border-2: #4d2a1c;
--green-low: #35906a;
--green-border: #1e4a37;
--blue-bright: #7fa5f4;
--blue-deep: #4a77d8;
--blue-link: #6b96f0;
--brand-accent: var(--blue);
--blue-bg-2: #14264d;
--blue-border-2: #2a3f6b;
--scrim: rgb(0, 0, 0, 0.6);
--shadow-pop: rgb(0, 0, 0, 0.5);
--shadow-drawer: rgb(0, 0, 0, 0.55);
--ring-blue: rgb(107, 150, 240, 0.22);
--shadow-sm: 0 1px 2px rgb(0, 0, 0, 0.3);
--shadow: 0 1px 2px rgb(0, 0, 0, 0.3), 0 6px 16px -8px rgb(0, 0, 0, 0.5);
--shadow-lg: 0 8px 30px -10px rgb(0, 0, 0, 0.6);
--ring: 0 0 0 1px rgb(255, 255, 255, 0.06);
/* AR72-HZN-1 — the dark atmosphere. The block above maps only the ALIAS layer (--ink, --green, …);
these are the color/gradient properties components consume DIRECTLY that had no dark value and so
fell back to their LIGHT (near-white) definitions — most visibly the sign-in lock-wall, whose
`--aurora-warm` backdrop rendered a light gradient behind light dark-theme ink (unreadable). Each gets
a cold-navy value here. The `tokens-dark.test.ts` token-guard makes a future unmapped consumed color a
BUILD failure; the azure interaction accent + the money-hero identity stay theme-constant on purpose
(filled button / green-on-white fills read in both) and are allowlisted THERE, not overridden here. */
/* the canonical Horizon ink ramp flips to the dark TEXT ramp (mirrors the --ink/-2/-3/-4 aliases) so a
component reading var(--ink-900) directly stays legible; the ink-as-dark-FILL cases (--grad-navy,
--navy) keep their own dark overrides so they stay dark heroes, not inverted light bands. */
--ink-900: #e8eef8;
--ink-700: #b6c2d9;
--ink-500: #8595b3;
--ink-300: #5a6a8a;
--hairline: #243352;
--canvas: #10192b;
/* the sign-in / route-hero studio sweep — a cold-navy deep vertical wash (§05 night ramp
--sky-night-a → --bg). The lock-wall heading (--ink #e8eef8) clears WCAG AA at ~11:1 and the tag
(--ink-2 #b6c2d9) at ~6.6:1 over the LIGHTEST stop (#22355c); the darkest stop only raises both. */
--aurora-warm: linear-gradient(180deg, #22355c 0%, #10192b 100%), var(--surface);
/* on-dark inner edges: a dim light top-highlight (not the light theme's opaque white) and light-alpha
washes, so an inner hairline reads on a dark surface instead of vanishing / glaring. */
--inset-hi: inset 0 1px 0 var(--on-dark-08);
--ink-wash-05: rgb(255, 255, 255, 0.05);
--ink-wash-10: rgb(255, 255, 255, 0.08);
/* elevation tokens consumed directly (route-hero) — collapse onto the dark shadow scale (the light
values carry a white inset highlight + light-cast shadows that read wrong after dark). */
--lift-lo: var(--shadow);
--shadow-xl: var(--shadow-lg);
/* the loyalty/ink hero keeps a DARK gradient after the ink ramp flipped to light text — re-point it at
the dark navy chip tokens so it stays a dark hero with white text, not an inverted light band. */
--grad-navy: linear-gradient(120deg, var(--navy-2) 0%, var(--navy) 100%);
}