/* Fonts loaded via in index.html for non-blocking rendering */
/* Shared brand palette (--color-primary / -light / -dark, the ink on it --color-on-primary and the logo mark
--color-logo) is single-sourced from design-tokens/tokens.json via Style Dictionary (F-179 TASK_08, I-021 AD4).
Generated by `cd mobile && npm run tokens`; drift-gated by scripts/check-token-drift.js.
@import MUST precede all rule sets below. Do NOT re-declare these five vars here —
the drift gate fails if they are redeclared or edited out of sync.
The import is VERSIONED with the same ?v=N as app.css in index.html (bump both together;
tests/scripts/css-import-versioned.test.js): nginx serves .css immutable for a year, so an unversioned import would
keep a returning browser on its cached copy after a deploy. */
@import './_tokens.generated.css?v=48';
/* BRAND VALUES — I-021 AD3/AD4. The brand block only derives from the five imported vars and never redeclares them
(scripts/css-token-parity.js). It must follow the @import directly. The rgb channels are pinned to the imported hex by
tests/scripts/css-brand-rgb.test.js. The two per-theme rules are part of the brand block, not of the theme blocks,
so they do not count for dark/light parity. "Orange only means mine" (REDESIGN_PROGRAM.md § 2). */
:root {
/* rgb channels for rgba() composition: --X-rgb is the channel triplet of --X. */
--color-primary-rgb: 237, 114, 0;
--color-primary-light-rgb: 255, 153, 52;
--color-primary-dark-rgb: 204, 100, 0;
/* SnipePrice orange tonal scale. 500 = --color-primary, 400 = -light (dark-theme hover), 600 = -dark (light-theme
hover). Brand logo orange (--color-logo) is reserved for the mark itself. */
--color-primary-50: #fff5eb;
--color-primary-100: #ffe6cc;
--color-primary-200: #ffcb94;
--color-primary-300: #ffb066;
--color-primary-400: var(--color-primary-light);
--color-primary-500: var(--color-primary);
--color-primary-600: var(--color-primary-dark);
--color-primary-700: #a34f00;
--color-primary-800: #7a3b00;
--color-primary-900: #4f2600;
--color-brand-logo: var(--color-logo);
/* Brand ink. Text on any primary-filled surface uses it: ink on #ed7200 is 5.9:1, on the hover
#ff9934 8.3:1, on the active #cc6400 4.5:1 (WCAG AA). White on #ed7200 is only 3.0:1 — never use it. */
--color-ink: var(--color-on-primary);
--text-on-primary: var(--color-on-primary);
/* F is flat (I-021 AD5): the name is kept for its callers, the value is the solid primary. */
--gradient-primary: var(--color-primary);
}
:root, :root[data-theme="dark"] {
/* Hover lightens in dark, darkens in light. */
--color-primary-hover: var(--color-primary-light);
/* Orange text ("mine") on the theme's surfaces. */
--color-primary-text: #ff9d42;
/* Brand line, glow (focus rings, primary shadows) and tinted surface ("mine" notices) — F dark --primary-line,
--glow, --primary-bg. */
--color-primary-line: rgba(var(--color-primary-rgb), 0.55);
--color-primary-glow: rgba(var(--color-primary-rgb), 0.15);
--color-primary-bg: rgba(var(--color-primary-rgb), 0.15);
}
:root[data-theme="light"] {
--color-primary-hover: var(--color-primary-dark);
--color-primary-text: #a34f00;
--color-primary-line: rgba(var(--color-primary-rgb), 0.5);
--color-primary-glow: rgba(var(--color-primary-rgb), 0.17);
--color-primary-bg: rgba(var(--color-primary-rgb), 0.1);
}
/* END BRAND VALUES */
/* =====================================================================================================
Dark theme block — I-021 AD1/AD3. Every theme-dependent colour, surface and shadow token, with prototype F's dark
values (f.src.html, dark section; I-021 TASK_09) — opaque flat panels (AD5). The light block below declares exactly
the same names (scripts/css-token-parity.js --require-blocks). Names are kept (AD1): each group names the F role it
plays. Copy F, never invent; a name F has no role for (tier, accent, amber, tags, gold, chart categories) keeps the
value the App shipped before.
===================================================================================================== */
:root, :root[data-theme="dark"] {
/* Native controls and scrollbars follow the theme (I-023); js/theme-boot.js sets the same on pre-paint */
color-scheme: dark;
/* Dark Theme — F --bg → --color-bg-dark; secondary / tertiary = F --panel-2 / --panel-3 */
--color-bg-dark: #15171b;
--color-bg-dark-secondary: #212429;
--color-bg-dark-tertiary: #282c32;
/* Elevated surface for floating menus / dropdown panels (Select, Dropdown menu, etc.) — F --panel, opaque */
--color-bg-elevated: #1c1f24;
/* Pinned (Fixed) table cells: opaque, or the columns that scroll under them show through (B-054). */
--table-pinned-bg: var(--color-bg-elevated);
/* New F roles (AD1): --panel-3, --panel-we, --we-band, --row-hover. */
--color-panel-3: #282c32;
--color-panel-we: #24272d;
--color-we-band: #31353c;
--color-row-hover: rgba(255, 255, 255, 0.04);
/* Glass names, flat F values (AD5: opaque, no blur) — F --panel / --panel-2 → --glass-bg / --glass-bg-light (subtle:
--panel-2, F's inset and header surface); F --line / --line-2 → --glass-border / --glass-border-light; shadow
tint of F --shadow */
--glass-bg-subtle: #212429;
--glass-bg: #1c1f24;
--glass-bg-light: #212429;
--glass-border: #2d3238;
--glass-border-light: #3c424b;
--glass-shadow: rgba(0, 0, 0, 0.5);
/* Text Colors — F --text / --text-2 / --muted */
--text-primary: #eceef1;
--text-secondary: #c3c8d0;
--text-muted: #979eab;
/* Gradients — F is flat: the page background is F --bg */
--gradient-bg: var(--color-bg-dark);
/* Semantic Status Colors — F --ok / --warn / --err / --info; -light and -hover take F's text tones
(--opp-text, --above, --threat-text, --below); -rgb / -bg the hues of F's tints */
--color-success: #5fd07f;
--color-success-light: #6cd38a;
--color-success-hover: #6cd38a;
--color-success-rgb: 76, 200, 112;
--color-success-bg: rgba(76, 200, 112, 0.13);
--color-warning: #f0b44a;
--color-warning-light: #f2bb55;
--color-warning-rgb: 240, 170, 40;
--color-warning-bg: rgba(240, 170, 40, 0.14);
--color-error: #ff7b72;
--color-error-light: #ff8f86;
--color-error-rgb: 255, 99, 88;
--color-error-bg: rgba(255, 99, 88, 0.2);
--color-info: #82b4ff;
--color-info-light: #8dbbff;
--color-info-hover: #8dbbff;
--color-info-rgb: 96, 150, 255;
--color-info-bg: rgba(96, 150, 255, 0.14);
--color-accent-purple: #722ed1;
--color-accent-purple-light: #b37feb;
--color-accent-purple-hover: #9254de;
/* Subscription Tier Colors */
--color-tier-starter: #60a5fa;
--color-tier-pro: #a78bfa;
--color-tier-starter-bg: rgba(96, 165, 250, 0.15);
--color-tier-pro-bg: rgba(167, 139, 250, 0.15);
/* Decorative Accents */
--color-amber: #f5a623;
/* Badges, events and the overlay mask — new F roles (AD1): --badge-bg / --badge-fg (neutral, never orange),
--event, --mask */
--color-badge-bg: #eceef1;
--color-badge-fg: #15171b;
--color-event: #f0b44a;
/* Event label text (I-023 TASK_06); --color-event stays the dot / outline colour */
--color-event-text: var(--color-event);
--color-mask: rgba(0, 0, 0, 0.5);
/* Shadow scale — replaces inline box-shadow values across the project.
*-primary-* use the brand glow; non-primary use the neutral glass shadow. */
--shadow-sm: 0 2px 4px var(--glass-shadow);
--shadow-md: 0 4px 12px var(--glass-shadow);
--shadow-lg: 0 8px 24px var(--glass-shadow);
--shadow-xl: 0 16px 48px var(--glass-shadow);
--shadow-primary-md: 0 4px 14px var(--color-primary-glow);
--shadow-primary-lg: 0 8px 24px var(--color-primary-glow);
--shadow-inset-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.06);
/* =================================================================================================
SnipePrice Core — rate semantics, charts and tooltip (D1). Shared by the rate calendar, night drawer,
dashboard and insights. Colour meaning (owner's point of view), never the brand orange for good/bad:
competitor cheaper than me = threat → error hue (.rate-threat-1…3)
competitor dearer than me = room → success hue (.rate-opportunity-1…3)
my position vs comp median → info (below) / neutral (at) / warning (above)
Orange (--rate-mine) only ever means "my hotel / my price". F roles: --threat-*, --opp-*, --below*,
--above*, --at-bg. The classes live in the "SnipePrice Core — rate semantics" section further down.
================================================================================================= */
--rate-mine: var(--color-primary);
/* "Mine" as text (F .rg .c-mine .v, .t-mine): the solid primary in dark; --rate-mine stays the graphic colour */
--rate-mine-text: var(--rate-mine);
--rate-mine-bg: rgba(var(--color-primary-rgb), 0.15);
--rate-mine-border: rgba(var(--color-primary-rgb), 0.55);
--rate-threat-bg-1: rgba(255, 99, 88, 0.11);
--rate-threat-bg-2: rgba(255, 99, 88, 0.2);
--rate-threat-bg-3: rgba(255, 99, 88, 0.32);
--rate-threat-text: #ff8f86;
/* F --threat: the solid threat mark (the dashboard board's undercut corner and legend swatch, I-028) */
--rate-threat: #ff6b60;
--rate-opportunity-bg-1: rgba(76, 200, 112, 0.09);
--rate-opportunity-bg-2: rgba(76, 200, 112, 0.17);
--rate-opportunity-bg-3: rgba(76, 200, 112, 0.28);
--rate-opportunity-text: #6cd38a;
--position-below-bg: rgba(96, 150, 255, 0.22);
--position-below-border: rgba(96, 150, 255, 0.5);
--position-below-text: #8dbbff;
--position-above-bg: rgba(240, 170, 40, 0.22);
--position-above-border: rgba(240, 170, 40, 0.5);
--position-above-text: #f2bb55;
--position-at-bg: rgba(255, 255, 255, 0.075);
--position-at-border: var(--glass-border-light);
--rate-sold-out-text: var(--text-muted);
/* Month heat view — new F roles (AD1) --heat-a1…a3 (above median) / --heat-b1…b3 (below median) */
--color-heat-a1: rgba(240, 170, 40, 0.12);
--color-heat-a2: rgba(240, 170, 40, 0.23);
--color-heat-a3: rgba(240, 170, 40, 0.36);
--color-heat-b1: rgba(96, 150, 255, 0.13);
--color-heat-b2: rgba(96, 150, 255, 0.23);
--color-heat-b3: rgba(96, 150, 255, 0.36);
/* Categorical series colours for competitor lines — none is orange, red or green on purpose. */
--chart-cat-1: #7ea8ff;
--chart-cat-2: #5fd4c7;
--chart-cat-3: #b79cff;
--chart-cat-4: #e9c46a;
--chart-cat-5: #f28fb1;
--chart-cat-6: #9fb4c7;
--chart-band: rgba(150, 160, 176, 0.13);
--chart-shade: rgba(255, 255, 255, 0.03);
/* New F roles (AD1) --chart-comp / --chart-grid / --chart-median; --chart-band is F --band, --chart-shade F --none-bg */
--color-chart-comp: rgba(150, 160, 176, 0.34);
/* F --band-edge — the market-range outline (legend swatch, weekday median bar; I-029) */
--color-chart-band-edge: rgba(150, 160, 176, 0.34);
--color-chart-grid: rgba(255, 255, 255, 0.07);
--color-chart-median: #d4d8e0;
/* Shadows for floating Core surfaces (switcher panel, hovered month day, pinned grid edge). */
--shadow-float: 0 14px 36px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-lift: 0 6px 16px rgba(0, 0, 0, 0.35);
--shadow-pinned-edge: 8px 0 16px -12px rgba(0, 0, 0, 0.6);
/* New role tokens added by I-021 TASK_05 so app.css carries no colour literal outside the blocks. */
--glass-border-subtle: #2d3238;
--glass-bg-hover: #2b2f36;
--glass-shine: rgba(255, 255, 255, 0.2);
--color-error-solid: #ff7b72;
--color-on-error-solid: #171820;
--color-error-description: #ff8f86;
/* I-032 (README D-l, D-o, D-s): F's color-mix() roles, measured — the selected card / tile ground (primary 5% over
--panel), the danger section's border (--err 35% over --line), the "Link ready" box (--ok 35% / 6%) */
--color-primary-faint: #262322;
--color-error-line: #774c4c;
--color-success-line: #3f6951;
--color-success-faint: #202a29;
--color-tier-starter-rgb: 96, 165, 250;
--color-accent-purple-rgb: 114, 46, 209;
--color-accent-cyan: #22d3ee;
--color-accent-cyan-rgb: 34, 211, 238;
--shadow-popup: 0 14px 36px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.3);
--shadow-tooltip: 0 14px 36px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
/* New role tokens added by I-021 TASK_06 so overrides.css carries no colour literal. */
--glass-border-faint: rgba(255, 255, 255, 0.04);
--glass-border-strong: rgba(255, 255, 255, 0.25);
--text-disabled: rgba(255, 255, 255, 0.35);
--color-scrim: rgba(0, 0, 0, 0.45);
--color-on-solid: #ffffff;
--color-tier-pro-rgb: 167, 139, 250;
--color-amber-rgb: 245, 166, 35;
/* AntD preset tag colours (cyan, pink/magenta, lime, volcano, geekblue): text tone + rgb for the tint */
--color-tag-cyan: #36cfc9;
--color-tag-cyan-rgb: 19, 194, 194;
--color-tag-pink: #f759ab;
--color-tag-pink-rgb: 235, 47, 150;
--color-tag-lime: #bae637;
--color-tag-lime-rgb: 160, 217, 17;
--color-tag-volcano: #ff7a45;
--color-tag-volcano-rgb: 250, 84, 28;
--color-tag-geekblue: #597ef7;
--color-tag-geekblue-rgb: 47, 84, 235;
/* Gold subscription tier (tier-max): gradient, line and glow */
--gradient-gold: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #b8860b 100%);
--color-gold-line: rgba(255, 215, 0, 0.5);
--shadow-gold: 0 0 12px rgba(212, 175, 55, 0.4);
/* New role tokens added by I-023 TASK_04 (light audit). F --knob, --sk-1 / --sk-2; the rest name an App rule's
per-theme value so dark computes as before: tooltip surface, sider selected item, focus ring, link text and the
plan-max text glow and the light orange accent (--color-primary-300 in dark). */
--color-knob: #eceef1;
--color-skeleton-1: #24282e;
--color-skeleton-2: #2d3239;
--color-tooltip-bg: var(--color-bg-elevated);
--color-tooltip-fg: var(--text-primary);
--color-tooltip-border: var(--glass-border);
--color-toast-bg: #23272d; /* F --sp-toast-bg: the Message toast ground (I-033 TASK_01) */
--color-nav-selected-bg: rgba(var(--color-primary-rgb), 0.15);
--color-nav-selected-text: var(--color-primary);
--color-nav-selected-icon: var(--color-primary);
--color-focus-ring: var(--color-primary-glow);
/* Orange text and icons on the theme's surfaces (I-023 TASK_06): the solid primary here, as in I-021. Links rest
on it and hover / press to --color-link-hover. */
--color-primary-fg: var(--color-primary);
--color-link-hover: var(--color-primary-text);
--glow-text: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
--color-primary-accent: var(--color-primary-300);
}
/* =====================================================================================================
Light theme block — I-021 AD3. Prototype F's light values (f.src.html, light section) for every name of the dark
block. Live since I-023: js/theme-boot.js sets data-theme (System default, snipeprice.theme). Text tokens are F's
(≥ 5.4:1 on their surfaces) — copy F, never invent. A name F has no light role for (tier, accent, amber, tag hues, chart
categories) gets a light value of its own hue (I-023 TASK_04, README D-o): text ≥ 4.5:1 and graphics ≥ 3:1 on #ffffff,
measured with scripts/fidelity/color.js (specs/I-023-RedesignLightTheme/VERIFICATION_REPORT.md).
===================================================================================================== */
:root[data-theme="light"] {
color-scheme: light;
/* Dark Theme names, light values — F --bg, --panel-2, --panel-3, --panel */
--color-bg-dark: #f1f2f5;
--color-bg-dark-secondary: #f7f8fa;
--color-bg-dark-tertiary: #eceef2;
--color-bg-elevated: #ffffff;
--table-pinned-bg: var(--color-bg-elevated);
--color-panel-3: #eceef2;
--color-panel-we: #eff1f4;
--color-we-band: #e2e5ea;
--color-row-hover: rgba(20, 22, 27, 0.035);
/* Glass names, flat F values — F --panel-2, --panel, --panel-2, --line, --line-2; shadow tint of F --shadow */
--glass-bg-subtle: #f7f8fa;
--glass-bg: #ffffff;
--glass-bg-light: #f7f8fa;
--glass-border: #dcdfe5;
--glass-border-light: #c6cbd3;
--glass-shadow: rgba(20, 22, 27, 0.13);
/* Text Colors — F --text / --text-2 / --muted */
--text-primary: #14161b;
--text-secondary: #3a3f4a;
--text-muted: #5a606d;
/* Gradients — F is flat: the page background is F --bg */
--gradient-bg: var(--color-bg-dark);
/* Semantic Status Colors — F --ok / --warn / --err / --info; -light and -hover take F's text tones
(--opp-text, --above, --threat-text, --below); -rgb / -bg the hues of F's tints */
--color-success: #1f7a3a;
--color-success-light: #1b7032;
--color-success-hover: #1b7032;
--color-success-rgb: 31, 140, 64;
--color-success-bg: rgba(31, 140, 64, 0.1);
--color-warning: #8a5300;
--color-warning-light: #8a5300;
--color-warning-rgb: 232, 150, 0;
--color-warning-bg: rgba(232, 150, 0, 0.14);
--color-error: #c0261b;
--color-error-light: #b42318;
--color-error-rgb: 217, 45, 32;
--color-error-bg: rgba(217, 45, 32, 0.14);
--color-info: #1453b8;
--color-info-light: #1453b8;
--color-info-hover: #1453b8;
--color-info-rgb: 31, 102, 214;
--color-info-bg: rgba(31, 102, 214, 0.1);
--color-accent-purple: #722ed1;
--color-accent-purple-light: #7a3fd0;
--color-accent-purple-hover: #5b23ad;
/* Subscription Tier Colors (no F role; I-023 D-o: same hue, text ≥ 4.5:1 on white and on its -bg) */
--color-tier-starter: #2159d4;
--color-tier-pro: #7c3aed;
--color-tier-starter-bg: rgba(33, 89, 212, 0.1);
--color-tier-pro-bg: rgba(124, 58, 237, 0.1);
/* Decorative Accents (no F role; I-023 D-o: amber text 5.68:1 on white) */
--color-amber: #8f5c00;
/* Badges, events and the overlay mask — F --badge-bg / --badge-fg, --event, --mask */
--color-badge-bg: #14161b;
--color-badge-fg: #ffffff;
--color-event: #d98c00;
/* F --event is a graphic colour (2.41:1 as 10px text on white); event labels take F --warn (#8a5300) */
--color-event-text: var(--color-warning);
--color-mask: rgba(20, 22, 27, 0.36);
/* Shadow scale — F --shadow's tint */
--shadow-sm: 0 2px 4px var(--glass-shadow);
--shadow-md: 0 4px 12px var(--glass-shadow);
--shadow-lg: 0 8px 24px var(--glass-shadow);
--shadow-xl: 0 16px 48px var(--glass-shadow);
--shadow-primary-md: 0 4px 14px var(--color-primary-glow);
--shadow-primary-lg: 0 8px 24px var(--color-primary-glow);
--shadow-inset-subtle: inset 0 1px 0 rgba(20, 22, 27, 0.04);
/* SnipePrice Core — rate semantics (see the dark block) — F --primary-bg / --primary-line, --threat-*, --opp-*,
--below*, --above*, --at-bg, --panel-we, --row-hover */
--rate-mine: var(--color-primary);
/* F --primary-text (5.71:1 on white); --rate-mine (#ed7200, 2.996:1) is for marks, bars and lines only */
--rate-mine-text: var(--color-primary-text);
--rate-mine-bg: rgba(var(--color-primary-rgb), 0.1);
--rate-mine-border: rgba(var(--color-primary-rgb), 0.5);
--rate-threat-bg-1: rgba(217, 45, 32, 0.07);
--rate-threat-bg-2: rgba(217, 45, 32, 0.14);
--rate-threat-bg-3: rgba(217, 45, 32, 0.24);
--rate-threat-text: #b42318;
/* F --threat */
--rate-threat: #d92d20;
--rate-opportunity-bg-1: rgba(31, 140, 64, 0.07);
--rate-opportunity-bg-2: rgba(31, 140, 64, 0.14);
--rate-opportunity-bg-3: rgba(31, 140, 64, 0.24);
--rate-opportunity-text: #1b7032;
--position-below-bg: rgba(31, 102, 214, 0.14);
--position-below-border: rgba(31, 102, 214, 0.5);
--position-below-text: #1453b8;
--position-above-bg: rgba(232, 150, 0, 0.22);
--position-above-border: rgba(232, 150, 0, 0.5);
--position-above-text: #8a5300;
--position-at-bg: rgba(20, 22, 27, 0.06);
--position-at-border: var(--glass-border-light);
--rate-sold-out-text: var(--text-muted);
/* Month heat view — F --heat-a1…a3 / --heat-b1…b3 */
--color-heat-a1: rgba(232, 150, 0, 0.13);
--color-heat-a2: rgba(232, 150, 0, 0.26);
--color-heat-a3: rgba(232, 150, 0, 0.42);
--color-heat-b1: rgba(31, 102, 214, 0.1);
--color-heat-b2: rgba(31, 102, 214, 0.2);
--color-heat-b3: rgba(31, 102, 214, 0.32);
/* Charts — categorical colours have no F role (I-023 D-o: same hue, each ≥ 3:1 on white); median / grid / band /
shade / comp are F's */
--chart-cat-1: #3d6fd6;
--chart-cat-2: #0f857a;
--chart-cat-3: #7c52d9;
--chart-cat-4: #8c6a00;
--chart-cat-5: #c4336f;
--chart-cat-6: #5c7085;
--chart-band: rgba(90, 96, 109, 0.12);
--chart-shade: rgba(20, 22, 27, 0.025);
--color-chart-comp: rgba(90, 96, 109, 0.34);
--color-chart-band-edge: rgba(90, 96, 109, 0.32);
--color-chart-grid: rgba(20, 22, 27, 0.08);
--color-chart-median: #3a3f4a;
/* Shadows for floating Core surfaces — F --shadow */
--shadow-float: 0 12px 32px rgba(20, 22, 27, 0.13), 0 1px 3px rgba(20, 22, 27, 0.08);
--shadow-lift: 0 6px 16px rgba(20, 22, 27, 0.1);
--shadow-pinned-edge: 8px 0 16px -12px rgba(20, 22, 27, 0.18);
/* New role tokens added by I-021 TASK_05 — F --line, --panel-hover, --err, --threat-text, --shadow's tint; a name F
has no role for keeps its dark value (shine, crash bar, on-error ink, accent-purple rgb); tier rgb and cyan follow
their light text tone (I-023 D-o) */
--glass-border-subtle: #dcdfe5;
--glass-bg-hover: #e7eaef;
--glass-shine: rgba(255, 255, 255, 0.2);
--color-error-solid: #c0261b;
--color-on-error-solid: #ffffff;
--color-error-description: #b42318;
/* I-032: F's color-mix() roles, measured (see the dark block) */
--color-primary-faint: #fef8f2;
--color-error-line: #d29e9e;
--color-success-line: #9abca9;
--color-success-faint: #f2f7f3;
--color-tier-starter-rgb: 33, 89, 212;
--color-accent-purple-rgb: 114, 46, 209;
--color-accent-cyan: #0e7490;
--color-accent-cyan-rgb: 14, 116, 144;
--shadow-popup: 0 12px 32px rgba(20, 22, 27, 0.13), 0 1px 3px rgba(20, 22, 27, 0.08);
--shadow-card-hover: 0 8px 32px rgba(20, 22, 27, 0.1);
--shadow-tooltip: 0 12px 32px rgba(20, 22, 27, 0.13), 0 1px 3px rgba(20, 22, 27, 0.08);
/* New role tokens added by I-021 TASK_06 — border / text / scrim take the ink tint of F's light block (no F role for
faint, strong, disabled or scrim: derived from F --line / --text-2 / --mask); --text-disabled is opaque in light, 4.90:1 on
white (I-023 TASK_04 Req 10); on-solid ink, the tag tint rgb and the gold tier keep their dark value; tier / amber rgb
and the tag text tones take their light hue (I-023 D-o) */
--glass-border-faint: rgba(20, 22, 27, 0.04);
--glass-border-strong: #aab0ba;
--text-disabled: #6b717d;
--color-scrim: rgba(20, 22, 27, 0.2);
--color-on-solid: #ffffff;
--color-tier-pro-rgb: 124, 58, 237;
--color-amber-rgb: 143, 92, 0;
--color-tag-cyan: #0b7a75;
--color-tag-cyan-rgb: 19, 194, 194;
--color-tag-pink: #b8287a;
--color-tag-pink-rgb: 235, 47, 150;
--color-tag-lime: #4f6b00;
--color-tag-lime-rgb: 160, 217, 17;
--color-tag-volcano: #b33a0b;
--color-tag-volcano-rgb: 250, 84, 28;
--color-tag-geekblue: #2f4fd1;
--color-tag-geekblue-rgb: 47, 84, 235;
--gradient-gold: linear-gradient(135deg, #d4af37 0%, #ffd700 50%, #b8860b 100%);
--color-gold-line: rgba(255, 215, 0, 0.5);
--shadow-gold: 0 0 12px rgba(212, 175, 55, 0.4);
/* New role tokens added by I-023 TASK_04 — F --knob, --sk-1 / --sk-2; tooltip = F --badge-bg / --badge-fg (F's
[data-tip]); sider selected = F .nv[aria-current] (--panel-3, --text, --primary-text icon); focus ring = F
:focus-visible's solid orange, -dark because --color-primary is 2.996:1 on white (#cc6400 3.90:1); link text = F
--primary-text (5.71:1); no text glow in light */
--color-knob: #ffffff;
--color-skeleton-1: #eceef2;
--color-skeleton-2: #f7f8fa;
--color-tooltip-bg: var(--color-badge-bg);
--color-tooltip-fg: var(--color-badge-fg);
--color-tooltip-border: var(--color-badge-bg);
--color-toast-bg: #ffffff; /* F --sp-toast-bg (I-033 TASK_01) */
--color-nav-selected-bg: var(--color-panel-3);
--color-nav-selected-text: var(--text-primary);
--color-nav-selected-icon: var(--color-primary-text);
--color-focus-ring: var(--color-primary-dark);
/* Orange text and icons (I-023 TASK_06): F --primary-text, because the solid #ed7200 is 2.996:1 on white. Links
rest on it, so their hover / press darkens one step (#7a3b00) instead of repeating it. */
--color-primary-fg: var(--color-primary-text);
--color-link-hover: var(--color-primary-800);
--glow-text: none;
/* The light orange accent (recommended rate, "mine" hovers and outlines): #ffb066 is 1.80:1 on white, -700
(#a34f00) 5.71:1 */
--color-primary-accent: var(--color-primary-700);
}
/* Theme-independent tokens — I-021 AD3 (D8): fonts, spacing, radius, transitions and third-party brand colours.
Not part of dark/light parity. Page widths and form-drawer widths live in the "Page Width Variables" block below. */
:root {
/* Legacy role names (I-021 #11439) — one alias per F role, declared once here, never per theme: the value lives
only in the F-role token of each theme block, so each alias still resolves per theme. No token is renamed or
removed (TASK_04 Req 5): --rate-weekend-bg is kept as the alias of F's weekend column (--color-panel-we). */
--rate-row-hover-bg: var(--color-row-hover);
--rate-weekend-bg: var(--color-panel-we);
--chart-grid: var(--color-chart-grid);
--chart-median: var(--color-chart-median);
/* Social Brand Colors (third-party identities — the same in every theme) */
--color-social-twitter: #1da1f2;
--color-social-linkedin: #0a66c2;
--color-social-facebook: #4267b2;
--color-social-whatsapp: #25d366;
/* Typography — I-021 AD7 (prototype F). Space Grotesk is the UI face, JetBrains Mono carries every number and label.
Both are self-hosted (css/fonts.css); keep the system fallbacks after the first family. */
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
/* Type scale — F. Body is 14px / 1.5; each tier below is a size with its weight (and tracking when it has one). */
--type-body: 14px;
--type-body-line: 1.5;
--type-title: 26px;
--type-title-weight: 600;
--type-title-tracking: -0.015em;
--type-panel-title: 15px;
--type-panel-title-weight: 600;
--type-step-title: 19px; /* F .wiz__title (I-032 D-n, #11504) */
--type-step-title-weight: 600;
--type-step-title-line: 1.25;
--type-step-title-tracking: -0.01em;
--type-section-title: 16px; /* F .sec__title — a settings section (I-032 D-o) */
--type-block-title: 14px; /* F .hsec__t — a block of result cards (I-032 D-l) */
--type-sub-title: 13.5px; /* F .subh — a sub-heading inside a panel (I-032 D-s) */
--type-label: 10.5px;
--type-label-weight: 500;
--type-label-tracking: 0.06em;
/* Control heights — F (inputs, selects, pickers, buttons; overrides.css "Control density" block) */
--control-h-sm: 32px;
--control-h: 34px;
--control-h-lg: 36px;
--control-h-block: 38px; /* full-width buttons — F .btn--block (auth forms) */
/* Sidebar nav icon weight (I-037 D-g) — F draws 17px line icons at stroke 1.7; AntD's Outline glyphs are filled paths in
a 1024-unit viewBox, so .shell-nav__item strokes them by this many glyph units (calibrated to F's ink at 1440).
I-037 TASK_07: recalibrated at the real 17px glyph (overrides.css) — any stroke ≤ 1 unit renders a hairline, alpha
ink 0.2188 vs F 0.2099 (+4 %); 32 units was compensating the 14px glyph AntD had imposed (≥ 0.285 at 17px) */
--nav-icon-stroke: 1px;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* Borders */
/* F's scale (I-021 AD7): panels 14px, controls 8px, chips 6px; xs/xxs stay below the chip radius */
--radius-xxs: 2px;
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 14px;
--radius-xl: 24px;
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 400ms ease;
}
/* Global heading font — B-051 AD2. Uses the Typography tokens above (--font-display).
AntD sets no heading font-family, so this rule can live here before ant-design-blazor.css. The type-scale title
classes are listed too, so a non-heading element that should look like a title takes the display font from its class. */
h1, h2, h3, h4, h5, h6,
.page-title, .wizard-step__title, .section-title-sm, .dashboard-card-title, .form-section__title,
.detail-page-grid__side-title, .section-title-xs, .sec__title, .hsec__t, .pv__h, .team-panel__title, .subh {
font-family: var(--font-display);
}
/* Type scale — B-051 AD3. One scale for every title class; pick the tier, never a new size.
Tier Size / weight Classes
page title --type-title 26px / 600 .page-title (1.5rem at <=480px); count inside it: .page-title__count
step title --type-step-title 19px / 600 .wizard-step__title (F .wiz__title: 1.25 line, -0.01em — I-032 D-n)
section title --type-section-title 16px / 600 .sec__title (F settings section, I-032)
panel title --type-panel-title 15px / 600 .section-title-sm, .dashboard-card-title, .form-section__title,
.detail-page-grid__side-title, .core-card-title, .pv__h, .team-panel__title
block title --type-block-title 14px / 600 .hsec__t (F result-card block, I-032)
sub-title --type-sub-title 13.5px / 600 .subh (F panel sub-heading, I-032)
label --type-label 10.5px / 500 mono .section-title-xs, .core-eyebrow, .kpi-strip__label (uppercase, tracked)
Labels and numbers are set in --font-mono (JetBrains Mono): the label tier, .tabular-nums, .kpi-strip__value,
.rate-pill, .page-title__count, .stat-value, .numeric-cell. Titles stay in the UI face.
.section-title-xs is still in the heading list above, but it is a label now: its own rule (later, same specificity)
sets --font-mono. */
html {
height: 100%;
background: var(--color-bg-dark);
overflow: hidden;
}
body {
font-family: var(--font-body);
font-size: var(--type-body);
line-height: var(--type-body-line);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--gradient-bg);
color: var(--text-primary);
height: 100%;
margin: 0;
overflow: hidden;
}
/* Global Icon Color Default — TASK_04 systemic fix.
AntDesign icons (.anticon), raw