/*!
* CheckrideReady Design Tokens
* ============================
* ONE canonical source of truth for color, type, spacing, radius, shadow,
* z-index, and motion. No page may redefine `:root` tokens. See README.md
* in this folder for usage rules and the include order.
*
* DRIFT RECONCILIATION (2026-09-13)
* ----------------------------------
* Before this file existed, `client/app.html` used one palette
* (`--bg:#070b12; --text:#94adc4; --text-bright:#ddeeff`) while the seven
* marketing/legal pages used another (`--bg:#06090f; --text:#8aa4c0;
* --text-bright:#e8f4ff`). Both were dark-navy variants of the same intended
* palette, drifted apart by copy-paste across files. Reconciled below to a
* single set, keeping the darker/higher-contrast value in every case where
* the two disagreed:
* --bg app had #070b12 (lighter) vs marketing #06090f (darker).
* Chose marketing's #06090f: darker background increases
* every foreground contrast ratio and it was already the
* majority value across 7 of 8 files.
* --surface app #0c1119 vs marketing #0a0e18. Chose marketing's
* #0a0e18 for the same reason (darker = more contrast
* headroom for text sitting on it) and majority consistency.
* --surface-2 app #111927 vs marketing #0f1522. Chose marketing's
* #0f1522.
* --text app #94adc4 vs marketing #8aa4c0. Both pass AA easily
* (8.48:1 and 7.74:1 on their respective backgrounds).
* Chose marketing's #8aa4c0 for majority consistency; the
* delta is not perceptible in isolation.
* --text-bright app #ddeeff vs marketing #e8f4ff. Chose marketing's
* #e8f4ff (majority + marginally higher contrast).
* --text-dim BOTH sides had a real WCAG AA failure here, and they were
* NOT the same drifted value (an earlier pass through this
* file wrongly said they were -- corrected here): app used
* #4a6580, measured 3.25:1 against its own bg (#070b12);
* the marketing pages used a different, more failing value,
* #3d5570, measured 2.59:1 against their own bg (#06090f).
* Both fail the 4.5:1 floor normal-size text needs, and
* this token is used at 11-14px for nav links, field
* labels, stat labels, footer links -- all normal text,
* not large text. Fixed to #7593b0, which clears 4.5:1
* against every surface level including the new top
* elevation (6.22:1 on --bg down to 4.86:1 on --surface-4,
* the worst case -- see the token below). FLAGGED to lead:
* this was shipping as a genuine accessibility bug on both
* the app and every marketing page.
* --amber/green/indigo/red were identical or only present on one side
* (app.html carries the full status-color set; marketing
* pages use green in 3 places and never load indigo/red).
* Kept as-is; see "STATUS COLORS" below for the superset.
* --border/--border-2 render at ~1.2-1.6:1 against the backgrounds they
* sit on. That's fine for decorative panel dividers (the
* background-color change between panels also signals the
* boundary), but app.html's `.btn-secondary` and every form
* `` use a border as the ONLY visual boundary of an
* interactive control -- that requires 3:1 under WCAG
* 1.4.11 (non-text contrast) and the old value fails it.
* Added --border-interactive as a new token for those
* cases. First pick was #456c90 (3.30-3.61:1 on --bg
* through --surface-2) -- but `.btn-secondary` sets
* `background: transparent`, so it inherits whatever
* surface it's dropped onto, including the new
* --surface-4 modal/popover level, and #456c90 measured
* only 2.82:1 there: a real, shipped WCAG failure, not a
* theoretical one. Re-picked as #5580a5 (see the token
* below for the full 5-surface reading, worst case
* 3.72:1); a middle option, #4d7599, was also considered
* and rejected for a thinner 3.20:1 margin on --surface-4.
* FLAGGED to lead: a second real accessibility bug, now
* fixed with headroom instead of scraping the floor.
* --font-display (Syne) existed only in the marketing pages; app.html
* never loaded it. Token kept for both; see README for the
* combined Google Fonts so app.html gains access to
* it too without dropping anything it currently loads.
*
* All ratios below were computed with a throwaway WCAG relative-luminance
* script (not eyeballed) -- see the design-system agent's session notes for
* the script if it needs to be re-run after a future color change.
*/
:root {
/* =====================================================================
COLOR - surfaces (dark aviation-instrument palette, darkest -> lightest)
===================================================================== */
--bg: #06090f; /* page background */
--surface: #0a0e18; /* level 1: cards, panels, sidebar, nav */
--surface-2: #0f1522; /* level 2: inputs, nested panels, chip "open" state */
--surface-3: #141c2c; /* level 3: raised chips/progress track, active nav-tab wash */
--surface-4: #1a2436; /* level 4 (NEW): modals, popovers, dropdowns, tooltips --
the top of the elevation stack, used sparingly */
/* =====================================================================
COLOR - text. Every ratio below is measured against ALL FIVE surface
tokens (--bg, --surface, --surface-2, --surface-3, --surface-4) since
these colors can appear on any of them; the figure quoted is always
the WORST CASE (which is always --surface-4, the lightest/topmost
surface, since these are light-on-dark colors). WCAG AA needs 4.5:1
for normal text, 3:1 for large text (>=24px, or >=19px bold) and for
required UI-component borders. See client/assets/css/contrast-check.mjs
for the automated, re-runnable version of this check.
===================================================================== */
--text-bright: #e8f4ff; /* headings, values, high-emphasis --
17.86:1 on --bg down to 13.94:1 on --surface-4
(worst case). AAA everywhere. */
--text: #8aa4c0; /* body copy, default reading color --
7.74:1 on --bg down to 6.04:1 on --surface-4
(worst case). AAA everywhere. */
--text-dim: #7593b0; /* secondary/meta: labels, timestamps, helper text --
6.22:1 on --bg down to 4.86:1 on --surface-4
(worst case). FIXED from two different failing
drifted values (see DRIFT RECONCILIATION above);
this passes AA (4.5:1) on every surface, with
the least margin -- 0.36 -- on --surface-4. Do
not darken this token, and do not darken
--surface-4, without re-running contrast-check.mjs. */
--text-disabled: #3d5570; /* disabled form controls / disabled buttons only.
2.02:1 on --bg down to 2.59:1 on --surface-4 --
well under AA, but WCAG explicitly exempts
disabled controls from contrast requirements.
This is NOT a substitute for --text-dim on any
control a user can actually interact with, and
contrast-check.mjs does not assert this token. */
--text-on-accent: #06090f; /* text placed on a solid --amber/--amber-bright
fill (not a surface -- checked against the
accent tokens directly): 9.28:1 on --amber,
11.94:1 on --amber-bright. Near-black rather
than pure #000 to stay one hue-family with the
rest of the palette; contrast is effectively
identical to pure black at these luminances. */
/* =====================================================================
COLOR - brand accent (amber). Single accent per the Color Consistency
Lock -- do not introduce a second brand hue.
===================================================================== */
--amber: #f59e0b; /* primary actions, active states, brand mark --
9.28:1 on --bg down to 7.25:1 on --surface-4
(worst case). AAA everywhere. */
--amber-bright: #fbbf24; /* hover/pressed state for amber fills, and a
brighter accent for headline emphasis --
11.94:1 on --bg down to 9.32:1 on
--surface-4 (worst case). AAA everywhere. */
--amber-dim: rgba(245, 158, 11, 0.12); /* tinted fill for badges/chips/pills */
--amber-glow: rgba(245, 158, 11, 0.08); /* large blurred ambient backgrounds only
(hero glow, auth-screen wash) -- never for text
or borders, opacity tuned for big soft areas */
/* =====================================================================
COLOR - semantic status (SUPERSET: app.html needs this three-color
system for exam-progress chips, success banners, and inline errors;
marketing pages use --green sparingly for pricing checkmarks and never
touch indigo/red. All three ship in tokens.css so both surfaces draw
from one definition instead of app.html's copy drifting again.)
===================================================================== */
--green: #10b981; /* success / done / correct -- 7.86:1 on --bg down to
6.13:1 on --surface-4 (worst case) */
--green-dim: rgba(16, 185, 129, 0.12);
--indigo: #818cf8; /* info / assignable / neutral-active -- 6.68:1 on --bg
down to 5.22:1 on --surface-4 (worst case) */
--indigo-dim: rgba(129, 140, 248, 0.12);
--red: #f87171; /* danger / error / destructive -- 7.20:1 on --bg down
to 5.63:1 on --surface-4 (worst case) */
--red-dim: rgba(248, 113, 113, 0.12);
/* =====================================================================
COLOR - borders
===================================================================== */
--border: #172033; /* decorative divider between panels of DIFFERENT
surface levels (the level change itself signals
the boundary) -- ~1.2:1 on --bg, intentionally
subtle, NOT WCAG-rated and not meant to be */
--border-2: #1e2d44; /* decorative divider, slightly stronger, for hairlines
within a single surface level -- ~1.4:1 on --bg,
same "not a required boundary" caveat as --border */
--border-interactive: #5580a5; /* NEW: the border of any control whose
boundary is the ONLY way a user identifies it --
form inputs, outline/secondary/ghost buttons,
the auth-tabs container. Since `.btn-secondary`
etc. render on `background: transparent`, this
must clear 3:1 against ALL FIVE surfaces, not
just --bg: 4.76:1 on --bg, 4.61:1 on --surface,
4.36:1 on --surface-2, 4.07:1 on --surface-3,
3.72:1 on --surface-4 (worst case). Revision 1:
an earlier value, #456c90, measured only 2.82:1
on --surface-4 and shipped as a real WCAG 1.4.11
failure -- see DRIFT RECONCILIATION above. Meets
WCAG 1.4.11 non-text contrast with real headroom
now; --border and --border-2 do NOT meet it and
must not be substituted here. */
--border-focus: var(--amber); /* focus ring color, see base.css */
/* =====================================================================
TYPE - font stacks (unchanged identity; already loaded via Google
Fonts on every page -- see README.md for the combined tag)
===================================================================== */
--font-display: 'Syne', sans-serif; /* headlines on marketing pages */
--font-mono: 'Space Mono', monospace; /* labels, buttons, nav, data, badges --
this is the "instrument panel" voice */
--font-sans: 'DM Sans', sans-serif; /* body copy, form inputs */
/* =====================================================================
TYPE - fluid scale (mobile-first clamp; all in rem so user font-size
preferences still scale the page)
===================================================================== */
--text-2xs: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem); /* ~11-12px: micro labels, timestamps */
--text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* ~12-13px: badges, mono labels */
--text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* ~13-14px: nav links, meta text */
--text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); /* ~15-16px: body copy default */
--text-md: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); /* ~16-17px: emphasized body */
--text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* ~17-19px: card titles */
--text-xl: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); /* ~19-22px: section titles */
--text-2xl: clamp(1.4rem, 1.25rem + 0.8vw, 1.75rem); /* page titles */
--text-3xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); /* sub-headlines */
--text-4xl: clamp(2.1rem, 1.7rem + 2vw, 3rem); /* section headlines */
--text-display: clamp(2.5rem, 2rem + 5vw, 5.5rem); /* hero headline (Syne) */
/* =====================================================================
SPACING - 4px base scale
===================================================================== */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* =====================================================================
RADIUS - one scale, used consistently (Shape Consistency Lock):
xs on tags/chips, sm on buttons+inputs, md on cards/sections,
lg on modals/auth cards, xl-2xl on feature/hero pill shapes,
full on true circles/pills (avatars use 50% directly)
===================================================================== */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 999px;
/* =====================================================================
SHADOW - tinted to the palette's blue-black hue, never pure black.
Kept subtle: this is a data/study tool, not a marketing showpiece.
===================================================================== */
--shadow-sm: 0 1px 2px rgba(2, 5, 10, 0.4);
--shadow-md: 0 4px 16px rgba(2, 5, 10, 0.45);
--shadow-lg: 0 12px 40px rgba(2, 5, 10, 0.5);
--shadow-glow-amber: 0 0 80px rgba(245, 158, 11, 0.06); /* auth/hero ambient only */
/* =====================================================================
Z-INDEX SCALE - matches the layer order already implied by app.html
(nav sticky at 200, success-banner at 400, modal at 500); documented
here so no page reaches for an arbitrary 9999 again.
===================================================================== */
--z-base: 0;
--z-dropdown: 50;
--z-sticky: 100; /* marketing