/* =============================================================================
scamsam — design tokens ONLY. Every colour in the project lives in this
file; scamsam.css and every template read var() and nothing else — a test
holds that line (tests/test_theme_css.py).
ONE design, three modes. DARK IS THE DEFAULT and the default is the ABSENT
attribute: the bare :root block below is what a page with no data-mode gets.
:root dark — the default
:root[data-mode="light"] light, when the reader chose it
:root[data-mode="auto"] follows the operating system:
dark falls through to :root, light
comes from the media block below,
which must stay IDENTICAL to the
light block (a test compares them)
The two --bg values are mirrored in MODE_COLOURS in app/theme.py (the
browser-frame colour behind the address bar) and the files have to agree —
tests/test_scaffold.py holds that.
The skin is scamsam's own: cool dark slate, one cold accent blue, and the
four signal colours a verdict can take — scam red, suspicious amber,
legitimate green, unclear grey — tuned to 4.5:1 or better on every ground
they sit on, in both modes. Fonts are system stacks; nothing is downloaded.
========================================================================== */
/* --- everything mode-independent: type, spacing, shape ------------------- */
:root {
--font-body:
system-ui, -apple-system, "Segoe UI", Roboto, "Liberation Sans",
"DejaVu Sans", Arial, sans-serif;
--font-head: var(--font-body);
--font-mono:
ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
"Liberation Mono", "DejaVu Sans Mono", monospace;
--fs-mark: 0.6875rem;
--fs-fine: 0.75rem;
--fs-sm: 0.8125rem;
--fs-md: 0.9375rem;
--fs-lg: 1.125rem;
--fs-xl: 1.375rem;
--fs-display: clamp(1.875rem, 1.2rem + 2.7vw, 2.5rem);
--lh-body: 1.55;
--lh-head: 1.15;
--head-weight: 650;
--head-tracking: -0.015em;
--wrap: 1120px;
--pad: 1.5rem;
--gut: 2rem;
--radius: 8px;
--radius-sm: 5px;
--gap: 1rem;
--block: 1.25rem;
--section: 2rem;
--ctl-h: 2.5rem;
--ctl-h-sm: 2rem;
--ctl-pad-x: 0.75rem;
--focus-w: 2px;
--focus-offset: 2px;
--motion: 0.14s;
}
/* --- DARK, the default: cool slate layers, no attribute needed ----------- */
:root {
color-scheme: dark;
--bg: #10151c;
--bg-2: #151c25;
--panel-bg: #161e28;
--panel-bg-2: #1b2531;
--well: #0b1017;
--line: #253140;
--line-soft: #1c2530;
--edge: #5f7186;
--ink: #dbe4ee;
--ink-2: #a3b1c2;
--ink-3: #8b9aac;
--accent: #56a8e8;
--accent-strong: #7fc0f4;
--accent-ink: #06121d;
--accent-soft: rgba(86, 168, 232, 0.14);
--scam: #ef6a64;
--scam-soft: rgba(239, 106, 100, 0.14);
--suspicious: #e3b04b;
--suspicious-soft: rgba(227, 176, 75, 0.14);
--legitimate: #55c68d;
--legitimate-soft: rgba(85, 198, 141, 0.14);
--unclear: #8b9aac;
--unclear-soft: rgba(139, 154, 172, 0.12);
/* the general good/warn/bad trio rides on the signal colours */
--ok: #55c68d;
--warn: #e3b04b;
--bad: #ef6a64;
--shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
0 14px 30px -20px rgba(0, 0, 0, 0.85);
--well-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
--backdrop: rgba(4, 7, 11, 0.65);
--qr-bg: #ffffff;
--caret: url("data:image/svg+xml;utf8,");
}
/* --- LIGHT, only when the reader chose it -------------------------------- */
:root[data-mode="light"] {
color-scheme: light;
--bg: #eef1f4;
--bg-2: #f6f8fa;
--panel-bg: #ffffff;
--panel-bg-2: #f0f4f8;
--well: #f4f6f9;
--line: #d3dae2;
--line-soft: #e2e7ec;
--edge: #66788c;
--ink: #17212c;
--ink-2: #46556a;
--ink-3: #566578;
--accent: #1268b3;
--accent-strong: #0d5292;
--accent-ink: #ffffff;
--accent-soft: rgba(18, 104, 179, 0.10);
--scam: #b3271f;
--scam-soft: rgba(179, 39, 31, 0.09);
--suspicious: #8a610b;
--suspicious-soft: rgba(138, 97, 11, 0.11);
--legitimate: #177a4b;
--legitimate-soft: rgba(23, 122, 75, 0.10);
--unclear: #566578;
--unclear-soft: rgba(86, 101, 120, 0.10);
--ok: #177a4b;
--warn: #8a610b;
--bad: #b3271f;
--shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 10px 26px -20px rgba(23, 33, 44, 0.5);
--well-shadow: 0 1px 2px rgba(23, 33, 44, 0.07) inset;
--backdrop: rgba(23, 33, 44, 0.45);
--qr-bg: #ffffff;
--caret: url("data:image/svg+xml;utf8,");
}
/* --- AUTO: the operating system decides ----------------------------------
Dark needs nothing — :root already is dark. Light is this block, and it
must carry EXACTLY the declarations of the light block above; a test
compares the two so they cannot drift apart. ---------------------------- */
@media (prefers-color-scheme: light) {
:root[data-mode="auto"] {
color-scheme: light;
--bg: #eef1f4;
--bg-2: #f6f8fa;
--panel-bg: #ffffff;
--panel-bg-2: #f0f4f8;
--well: #f4f6f9;
--line: #d3dae2;
--line-soft: #e2e7ec;
--edge: #66788c;
--ink: #17212c;
--ink-2: #46556a;
--ink-3: #566578;
--accent: #1268b3;
--accent-strong: #0d5292;
--accent-ink: #ffffff;
--accent-soft: rgba(18, 104, 179, 0.10);
--scam: #b3271f;
--scam-soft: rgba(179, 39, 31, 0.09);
--suspicious: #8a610b;
--suspicious-soft: rgba(138, 97, 11, 0.11);
--legitimate: #177a4b;
--legitimate-soft: rgba(23, 122, 75, 0.10);
--unclear: #566578;
--unclear-soft: rgba(86, 101, 120, 0.10);
--ok: #177a4b;
--warn: #8a610b;
--bad: #b3271f;
--shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 10px 26px -20px rgba(23, 33, 44, 0.5);
--well-shadow: 0 1px 2px rgba(23, 33, 44, 0.07) inset;
--backdrop: rgba(23, 33, 44, 0.45);
--qr-bg: #ffffff;
--caret: url("data:image/svg+xml;utf8,");
}
}