/* * Observatory design tokens — the single source of truth for every colour, * font, spacing and radius value in CronCal. Components must consume these * variables; no component stylesheet should hardcode a colour/font/space. * * Theme model * ----------- * :root -> DARK (the primary theme; also the default) * @media (prefers-color-scheme: light) :root:not([data-theme="dark"]) * -> LIGHT, applied automatically to OS-light * users who have not pinned a manual theme * :root[data-theme="light"] -> LIGHT, forced by the manual toggle * :root[data-theme="dark"] -> DARK, forced by the manual toggle * * The manual toggle simply sets `data-theme` on (wired in CRON-43). * Light is a structural mirror of dark — same roles, same hue family * reassigned across the scale — never a naive inversion. * * Accent rule: #F4B942 amber is the ONE and ONLY accent. Never introduce a * second. --success / --warning / --danger / --ring are semantic functional * colours, not accents. * * This file must load before any component CSS (see index.html). */ /* ── Fonts (CRON-41) ────────────────────────────────────────────────────── */ /* Self-hosted, Latin-subset WOFF2 — no Google Fonts (PECR/CSP simplicity). Source: Fontsource per-weight `latin` static WOFF2 (@fontsource/ibm-plex-sans, @fontsource/jetbrains-mono; OFL-1.1, see wwwroot/fonts/*-OFL.txt), re-subset with `pyftsubset --flavor=woff2` to Basic Latin + typographic punctuation: U+0020-007E,U+00A0,U+00A9,U+00B7,U+00D7,U+2010-2015,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2192,U+2212 (~78 KB total). The four most-used weights are preloaded in index.html. Accented Latin letters fall back to the system font via font-display: swap. */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); } /* ── Dark theme (primary / default) ─────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #0B1120; --bg-elevated: #131C2E; --bg-input: #1A2438; --bg-hover: #1F2B44; /* Borders */ --border: #1F2B44; --border-strong: #2D3F5E; /* Text */ --text: #E8ECF1; --text-muted: #8B95A8; --text-subtle: #5A6478; /* Accent — the only one */ --accent: #F4B942; --accent-hover: #F7C75F; --accent-text: #0B1120; /* text/icons sitting on an --accent fill */ /* Diff (paired with +/- prefixes and hatching in the diff component, never colour alone) */ --diff-add: #3FB950; --diff-add-bg: rgba(63, 185, 80, 0.15); --diff-remove: #F85149; --diff-remove-bg: rgba(248, 81, 73, 0.15); /* Status (functional, not accents) */ --success: #3FB950; --warning: #D29922; --danger: #F85149; --ring: var(--accent); /* focus ring — keeps the single-accent identity */ } /* ── Light theme ────────────────────────────────────────────────────────── */ /* Shared light palette. Declared twice — once for OS-light users who have not pinned a theme, once for the manual override — because a media query cannot share a selector list with a non-media rule. Values are identical; keep the two blocks in sync. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #F4F6FB; --bg-elevated: #FFFFFF; --bg-input: #FFFFFF; --bg-hover: #E7ECF4; --border: #D5DCE8; --border-strong: #B4BFD2; --text: #131C2E; --text-muted: #55617A; --text-subtle: #8A95AA; --accent: #F4B942; --accent-hover: #E0A828; --accent-text: #0B1120; --diff-add: #1A7F37; --diff-add-bg: rgba(26, 127, 55, 0.12); --diff-remove: #CF222E; --diff-remove-bg: rgba(207, 34, 46, 0.10); --success: #1A7F37; --warning: #9A6700; --danger: #CF222E; --ring: var(--accent); } } :root[data-theme="light"] { color-scheme: light; --bg: #F4F6FB; --bg-elevated: #FFFFFF; --bg-input: #FFFFFF; --bg-hover: #E7ECF4; --border: #D5DCE8; --border-strong: #B4BFD2; --text: #131C2E; --text-muted: #55617A; --text-subtle: #8A95AA; --accent: #F4B942; --accent-hover: #E0A828; --accent-text: #0B1120; --diff-add: #1A7F37; --diff-add-bg: rgba(26, 127, 55, 0.12); --diff-remove: #CF222E; --diff-remove-bg: rgba(207, 34, 46, 0.10); --success: #1A7F37; --warning: #9A6700; --danger: #CF222E; --ring: var(--accent); } /* ── Typography, spacing, radii (theme-independent) ─────────────────────── */ :root { /* Font families. The custom WOFF2 faces are loaded by CRON-41; the system fallbacks here prevent FOIT before the bundle arrives. */ --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace; /* Spacing — 8px rhythm, in rem so it scales with the user's root size. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* Radii — 6px is the hard ceiling; rounded-full is reserved for status pills. */ --radius-1: 2px; --radius-2: 4px; --radius-3: 6px; } /* ── Utilities ──────────────────────────────────────────────────────────── */ /* Tabular figures for any numeric content (timestamps, counts, cron fields). Base application of the tokens to html/body lives in the consuming sheet (app.css today, the layout shell in CRON-43) — this file only declares. */ .numeric { font-variant-numeric: tabular-nums; }