/* tokens.css — design tokens: colour, type scale, spacing, radii, shadows.
Palette: deep lake blue + teal, white and near-white surfaces, one warm
gold accent reserved for CTAs and the jackpot figure.
Every text/background pair below meets WCAG 2.1 AA (>= 4.5:1 for body
text, >= 3:1 for large text and UI borders) in both colour schemes. */
:root {
/* --- Brand ------------------------------------------------------- */
--lake-800: #0B3C5D; /* 11.5:1 on white */
--lake-700: #14567F; /* 8.0:1 on white */
--lake-100: #E3EEF4;
--lake-050: #F3F7F9;
--teal-800: #0A5B68;
--teal-700: #0E6E7D; /* 5.9:1 on white */
--teal-100: #DDF0F1;
--gold-500: #E9A63B; /* CTA / jackpot surface */
--gold-600: #D2900F;
--gold-ink: #7A4E02; /* 7.1:1 on white — gold used as text */
--on-gold: #241703; /* 8.4:1 on --gold-500 */
/* Solid button surface. Kept separate from --lake-800 because that token
flips to a light tint in dark mode, where it is used as ink. */
--btn-bg: #0B3C5D;
--btn-bg-hover: #06283D;
--btn-ink: #FFFFFF; /* 11.5:1 on --btn-bg */
/* --- Surfaces and ink -------------------------------------------- */
--bg: #FFFFFF;
--bg-alt: #F3F7F9;
--bg-sunk: #E9F1F5;
--surface: #FFFFFF;
--surface-2: #F8FBFC;
--ink: #10222E;
--ink-muted: #48606E; /* 6.6:1 on white */
--band-bg: #0B3C5D; /* dark band sections */
--band-ink: #F2F8FB;
--band-muted: #C3DAE8; /* 10.2:1 on --band-bg */
--border: #D5E0E7; /* decorative separators */
--border-strong: #566E7E; /* 4.4:1 on white — inputs, table rules */
--ok: #0F6B4B;
--ok-bg: #E4F4EC;
--warn-ink: #7A3E00;
--warn-bg: #FDF1DF;
--err: #A11626; /* 6.5:1 on white */
--err-bg: #FCEBED;
--focus: #0B3C5D;
--focus-halo: #FFFFFF;
/* --- Type -------------------------------------------------------- */
/* No webfonts are loaded, so the voice has to come from what is already
on the machine. Headings use a transitional serif — New York on Apple,
Palatino or Georgia on Windows, Noto Serif on Android — which reads as
a printed report rather than an app. Body stays humanist sans for
legibility at 17px on a poor screen. */
--font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
"Book Antiqua", Charter, Georgia, "Times New Roman", serif;
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
"Liberation Mono", Menlo, monospace;
/* Figures stay in the sans: the serif stacks carry old-style numerals on
several platforms, which would set "$14,475" with descending digits. */
--font-num: var(--font-sans);
--fs-xs: 0.9375rem; /* 15px — the smallest size used anywhere */
--fs-sm: 1rem; /* 16px */
--fs-base: 1.0625rem; /* 17px — body minimum */
--fs-md: 1.1875rem; /* 19px */
--fs-lg: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
--fs-h4: clamp(1.1875rem, 1.1rem + 0.4vw, 1.35rem);
--fs-h3: clamp(1.3rem, 1.15rem + 0.8vw, 1.65rem);
--fs-h2: clamp(1.55rem, 1.25rem + 1.5vw, 2.2rem);
--fs-h1: clamp(1.9rem, 1.4rem + 2.4vw, 2.95rem);
--fs-display: clamp(2.4rem, 1.4rem + 6.4vw, 5rem);
--lh-tight: 1.15;
--lh-heading: 1.2;
--lh-body: 1.65;
/* --- The horizon motif ------------------------------------------- */
/* A hairline wave lifted out of the logo, tiled at every band change.
Two variants: one for a light surface, one for a dark one. */
--rule-wave-light: url('data:image/svg+xml;utf8,');
/* Film grain for the dark bands, so a large navy area has some tooth. */
--grain: url('data:image/svg+xml;utf8,');
/* --- Space ------------------------------------------------------- */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 2.75rem;
--s-8: 4rem;
--wrap: 74rem;
--wrap-narrow: 48rem;
/* --- Shape ------------------------------------------------------- */
--r-1: 4px;
--r-2: 8px;
--r-3: 14px;
/* Layered, tight shadows read as paper on a surface rather than as a
generic drop shadow: a hairline contact edge plus a soft spread. */
--sh-1: 0 1px 1px rgba(6, 40, 61, 0.05), 0 2px 4px rgba(6, 40, 61, 0.04),
0 8px 20px -8px rgba(6, 40, 61, 0.10);
--sh-2: 0 1px 2px rgba(6, 40, 61, 0.08), 0 6px 14px -4px rgba(6, 40, 61, 0.12),
0 24px 48px -18px rgba(6, 40, 61, 0.22);
--sh-lift: 0 1px 1px rgba(6, 40, 61, 0.06), 0 4px 10px -2px rgba(6, 40, 61, 0.10),
0 18px 34px -14px rgba(6, 40, 61, 0.20);
--tap: 44px; /* minimum tap target */
}
@media (prefers-color-scheme: dark) {
:root {
--lake-100: #143244;
--lake-050: #10222E;
--bg: #0A1620;
--bg-alt: #0F202B;
--bg-sunk: #132A38;
--surface: #12252F;
--surface-2: #162C38;
--ink: #E6EFF4;
--ink-muted: #A8BFCC; /* 9.7:1 on --bg */
--lake-800: #8CC6E4; /* used as text/icon colour in dark mode */
--lake-700: #A5D5EE;
--teal-800: #A6E8F0; /* ink on --teal-100, which is dark here */
--teal-700: #6FD3DE;
--teal-100: #10333A;
--gold-ink: #F0B860;
--gold-500: #E9A63B;
--btn-bg: #1E5F84; /* 6.6:1 against --btn-ink */
--btn-bg-hover: #2A78A5;
--btn-ink: #FFFFFF;
--band-bg: #071A27;
--band-ink: #EAF3F8;
--band-muted: #B7D2E1;
--border: #274154;
--border-strong: #7A98AB;
--ok: #63D3A4;
--ok-bg: #0E2C22;
--warn-ink: #F2C078;
--warn-bg: #2E220C;
--err: #FF9FA8;
--err-bg: #33131A;
--focus: #8CC6E4;
--focus-halo: #06283D;
--sh-1: 0 1px 1px rgba(0, 0, 0, 0.45), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
--sh-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 22px 44px -16px rgba(0, 0, 0, 0.7);
--sh-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 32px -12px rgba(0, 0, 0, 0.65);
}
}