/* ============================================================================ RockSolid — design tokens ---------------------------------------------------------------------------- One component set, two themes: · Chalk & Steel (light) — the default, the paper training log · Plate Black (dark) — rubber plate and painted steel Three viewer states are handled, not two: an explicit user choice stamps data-theme on ; "system" stamps nothing, so prefers-color-scheme has to carry it. Never declare a colour anywhere but here. Components read semantic tokens only — never the raw palette below. ============================================================================ */ /* ---- the faces ------------------------------------------------------------- Written by tools/fonts.py, which subsets them to the charset the app can actually print and puts a hash of each file in its name. Do not edit the src lines by hand: the host serves woff2 with a week's max-age (it overrides the year .htaccess asks for — see PLAN §14), so the hash in the name is the only thing that lets a corrected font reach a browser that has been here before. font-display: swap throughout — a set logged between sets must never wait on type, and the fallbacks below are chosen to be close enough that the swap does not throw the layout about. ---------------------------------------------------------------------------- */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/archivo-7fcb1c93.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-1f682253.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/source-serif-4-72c487ae.woff2") format("woff2"); } :root { /* ---- raw palette · Chalk & Steel ------------------------------------ */ --chalk-paper: #EFEFEB; /* cool, not cream: the grey has a green bias */ --chalk-card: #FFFFFF; --chalk-sunk: #E5E5DF; --chalk-rule: #D6D6CE; /* The two grey steps below were measured against WCAG AA in the Milestone 8 audit and both failed: faint text came in at 2.49:1 and dim at 4.20:1 against the paper, on 11px uppercase micro-labels — the smallest type in the app and the least forgiving. They are darker now, and every value in both themes clears 4.5:1 on the page ground, on a card and on a sunken row. The hue is unchanged; only the lightness moved. */ --chalk-ink: #1A1D1B; --chalk-dim: #5C625C; /* 5.4:1 on paper, 6.3:1 on a card */ --chalk-faint: #676D67; /* 4.6:1 on paper — was 2.49:1 */ --chalk-oxide: #A3311C; /* records and the live set — nothing else */ --chalk-maroon: #6E140C; /* destructive, deliberately darker than oxide */ /* ---- raw palette · Plate Black -------------------------------------- */ --plate-black: #0A0B0A; --plate-panel: #131513; --plate-sunk: #1A1D19; --plate-line: #23261F; --plate-ink: #EFF2EA; --plate-dim: #899183; /* 5.6:1 on a panel */ --plate-faint: #7A8274; /* 4.6:1 on a panel — was 3.21:1 */ --plate-lime: #B4F227; --plate-red: #FF7A66; /* ---- semantic surface + text (light is the bare-:root default) ------- */ --bg: var(--chalk-paper); --surface: var(--chalk-card); --surface-sunken: var(--chalk-sunk); --line: var(--chalk-rule); --text: var(--chalk-ink); --text-dim: var(--chalk-dim); --text-faint: var(--chalk-faint); /* ---- accent: state, never decoration -------------------------------- */ --accent: var(--chalk-oxide); --accent-contrast: #FFFFFF; /* text placed on --accent */ --accent-tint: rgba(163, 49, 28, 0.10); --accent-edge: rgba(163, 49, 28, 0.42); /* ---- semantic state -------------------------------------------------- */ --pr: var(--chalk-oxide); /* personal record */ --success: #2F6E4A; /* synced, set complete */ --warning: #8A5A00; /* queued offline, stale data */ --danger: var(--chalk-maroon); /* delete — see rule below */ --focus: #2F6FEB; /* ---- the logo's brushed-steel gradient ------------------------------- The mark is polished metal, which reads as light-on-dark. On paper the same silver would vanish, so the light theme inverts it to dark steel rather than tinting it — the gradient is the identity, not the hue. The logo is never --accent: accent means state, and a logo is not state. */ --logo-hi: #4A535B; --logo-lo: #14171A; /* The artwork is polished steel, drawn to be seen on near-black. The vector version is transparent, so on a dark ground it needs nothing behind it — but on paper that same silver would disappear, so the light theme puts it back on a plate. Sampled from the original PNG's baked ground, which is what the artwork was composed against. */ --logo-plate: #161B21; /* ---- typography ------------------------------------------------------ Faces are self-hosted (see assets/fonts/); the CSP forbids font CDNs, so every fallback below is a face that genuinely exists on the device. */ --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-note: "Source Serif 4", Georgia, "Times New Roman", serif; /* Numerals are monospaced in BOTH themes — data has to align in columns. The serif is reserved for session notes, where prose belongs. */ --step--2: 0.6875rem; /* 11px — uppercase micro-labels */ --step--1: 0.8125rem; /* 13px — captions, chips */ --step-0: 1rem; /* 16px — body, the minimum for anything editable */ --step-1: 1.125rem; /* 18px — set values */ --step-2: 1.375rem; /* 22px — exercise names, section heads */ --step-3: 1.75rem; /* 28px — screen titles */ --step-4: 2.5rem; /* 40px — the one big number on a focus screen */ --tracking-label: 0.12em; --tracking-tight: -0.02em; --leading-tight: 1.15; --leading-body: 1.55; /* ---- space, shape, motion -------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --border-hair: 1px; --tap-min: 48px; /* chalk-dusted thumbs; nothing tappable is smaller */ --shadow-card: 0 1px 2px rgba(26, 29, 27, 0.06); /* What the browser draws for itself: checkbox ticks, select menus, number spinners, scrollbars, the caret. Without this the page says "light dark" in a meta tag and every one of those follows the *operating system*, so a phone set to dark at the OS level drew a black checkbox and a black number field on this light page. The app decides its own theme; these follow it, and the three states below mirror the token blocks exactly. */ color-scheme: light; --dur-fast: 120ms; --dur-mid: 220ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); } /* ---- dark: system preference, unless the user explicitly chose light ------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--plate-black); --surface: var(--plate-panel); --surface-sunken: var(--plate-sunk); --line: var(--plate-line); --text: var(--plate-ink); --text-dim: var(--plate-dim); --text-faint: var(--plate-faint); --accent: var(--plate-lime); --accent-contrast: var(--plate-black); --accent-tint: rgba(180, 242, 39, 0.12); --accent-edge: rgba(180, 242, 39, 0.45); --pr: var(--plate-lime); --success: #6FD08A; --warning: #E8B23A; --danger: var(--plate-red); --focus: #7FA9FF; --logo-hi: #F2F6FA; /* the polished highlight */ --logo-lo: #7C8B99; /* brushed steel in shadow */ /* No plate on Plate Black: the artwork was drawn for this ground. */ --logo-plate: transparent; --shadow-card: none; /* dark theme separates with lines, not shadow */ } } /* ---- dark: explicit user choice wins over a light OS ---------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--plate-black); --surface: var(--plate-panel); --surface-sunken: var(--plate-sunk); --line: var(--plate-line); --text: var(--plate-ink); --text-dim: var(--plate-dim); --text-faint: var(--plate-faint); --accent: var(--plate-lime); --accent-contrast: var(--plate-black); --accent-tint: rgba(180, 242, 39, 0.12); --accent-edge: rgba(180, 242, 39, 0.45); --pr: var(--plate-lime); --success: #6FD08A; --warning: #E8B23A; --danger: var(--plate-red); --focus: #7FA9FF; --logo-hi: #F2F6FA; --logo-lo: #7C8B99; --logo-plate: transparent; --shadow-card: none; } /* ============================================================================ Rules the components must follow. These are load-bearing, not style advice. 1. --accent marks STATE only: the live set, a completed tick, a personal record, the running rest timer. It is never a decorative flourish, never a background for a whole card, never a border on something inert. 2. Destructive actions never rely on hue. In Chalk & Steel the accent is itself red, so delete uses --danger AND an outlined treatment AND an explicit verb ("Delete this workout"). Colour alone carries no meaning anywhere in the app — the same rule keeps it usable colour-blind. 3. Every colour pair meets WCAG AA: 4.5:1 for text, 3:1 for UI edges and icons. Text is never placed on --accent except via --accent-contrast. 4. Nothing interactive is smaller than --tap-min, and live controls sit in the bottom third of the screen where a thumb reaches mid-set. 5. Icelandic runs roughly 15% longer than English. Labels wrap, they do not truncate; nothing is sized to fit one language's string. 6. Respect prefers-reduced-motion: the rest-timer ring and the sync pulse are the only animations, and both stop dead under that query. ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-mid: 0ms; } }