/* ========================================================================================================== JODIAC - design tokens (CONTRACTS C3). Variables only: no selectors other than :root. To re-skin the site, change the values in this file and drop logo/banner files into /assets/brand/. Never rename or remove a variable that is already published (other parts' CSS uses them); add new ones. Themes - Dark is the default (what the site has always looked like). - Light follows the visitor's system setting (prefers-color-scheme: light) unless the visitor has chosen a theme with the toggle. The choice is stored in localStorage ("thesky-theme": "light" | "dark") and applied by /js/theme-init.js (a tiny blocking script in ) as . - The light values appear twice below (system setting, and explicit choice). Keep both blocks identical. Breakpoints (CSS variables cannot be used inside @media, so these are documented here and used literally): --bp-xs 480px phones in portrait grow from here --bp-sm 760px side rail becomes a bottom bar below this width --bp-md 1100px telemetry panel narrows below this width --bp-lg 1440px wide desktop Contrast: text colours below were checked for WCAG AA (4.5:1 body text, 3:1 large text/UI) on --bg and on --surface-solid in both themes. ========================================================================================================== */ :root, [data-scope="dark"] { /* data-scope="dark" keeps a block dark inside the light theme (the live sky) */ color-scheme: dark; /* ---- colour: required names (C3) --------------------------------------------------------------- */ --bg: #04050a; /* page background */ --surface: rgba(10, 12, 22, 0.66);/* glass panels and cards (translucent over the page glow) */ --text: #f3f4f8; /* body text */ --muted: #9aa0b6; /* secondary text */ --accent: #e8c27a; /* the one gold accent: primary buttons, active states */ --danger: #ff8f8f; --ok: #6fe3a4; /* ---- colour: additional --------------------------------------------------------------------------- */ --surface-solid: #0b0d18; /* opaque surface: menus, inputs on top of images */ --surface-2: rgba(255, 255, 255, 0.05); /* raised/hover surface inside a card */ --accent-hi: #ffdca0; /* links, highlights; lighter than --accent in dark, darker in light */ --on-accent: #14100a; /* text on an --accent background */ --warn: #f0c36a; --info: #8fd7ff; --line: rgba(255, 255, 255, 0.12); /* hairlines and borders */ --line-strong: rgba(255, 255, 255, 0.26); --accent-soft: rgba(232, 194, 122, 0.10); /* tinted background for active rows and notices */ --accent-line: rgba(232, 194, 122, 0.45); --overlay: rgba(4, 5, 10, 0.72); --code-bg: rgba(0, 0, 0, 0.5); --code-text: #dfe3f2; --code-key: #ffdca0; /* highlight colours inside code blocks (blocks are dark in both themes) */ --code-str: #8fd7ff; --page-glow-1: rgba(70, 60, 160, 0.30); /* soft colour in the page background, top right */ --page-glow-2: rgba(160, 100, 40, 0.16); /* and bottom left */ --rail-bg: rgba(5, 6, 12, 0.78); /* side rail / bottom bar */ --stars: rgba(255, 255, 255, 0.55); /* star dots in the page background (dark theme only) */ /* ---- type -------------------------------------------------------------------------------------------- */ --font-sans: 'Space Grotesk', 'Space Grotesk Fallback', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-0: 0.8125rem; /* 13px captions, labels (never body text) */ --fs-1: 1rem; /* 16px body (the minimum on phones) */ --fs-2: 1.125rem; /* 18px lead text */ --fs-3: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem); /* h3 */ --fs-4: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* h2 */ --fs-5: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); /* h1 on inner pages */ --fs-6: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); /* home hero */ --lh-body: 1.6; --lh-body-hi: 1.8; /* Devanagari needs more room */ --lh-tight: 1.15; --measure: 66ch; /* comfortable line length */ --tracking-caps: 0.2em; /* letter-spacing for small uppercase labels */ /* ---- spacing (4px base) ------------------------------------------------------------------------------ */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4.5rem; /* 72px */ --page-pad: clamp(1.25rem, 5vw, 4rem); /* side padding of page content */ --page-max: 70rem; /* max content width */ /* ---- shape ----------------------------------------------------------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 18px 60px rgba(0, 0, 0, 0.45); --blur: blur(18px) saturate(1.2); /* backdrop-filter for glass surfaces */ /* ---- focus ring (used by every interactive element) -------------------------------------------------------- */ --focus-color: var(--accent-hi); --focus-width: 2px; --focus-offset: 2px; --focus-ring: var(--focus-width) solid var(--focus-color); /* ---- controls --------------------------------------------------------------------------------------------- */ --tap: 2.75rem; /* 44px minimum tap target */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --t-fast: 0.18s; /* ---- layout of the site shell ---------------------------------------------------------------------------------- */ --rail-w: 72px; --rail-open: 252px; --bar-h: 64px; /* bottom bar height on phones */ /* ---- legacy names kept so older pages keep working (do not use in new CSS) ---------------------------------------- */ --gold: var(--accent); --gold-hi: var(--accent-hi); --bad: var(--danger); --panel: var(--surface); --panel-solid: var(--surface-solid); --sans: var(--font-sans); --mono: var(--font-mono); } /* ---- light theme: follows the system unless the visitor chose one ----------------------------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f7f5ef; --surface: #ffffff; --text: #15161d; --muted: #565b70; --accent: #8a5a00; --danger: #b3261e; --ok: #17693f; --surface-solid: #ffffff; --surface-2: rgba(21, 22, 29, 0.05); --accent-hi: #6e4800; --on-accent: #ffffff; --warn: #8a5a00; --info: #0b5a85; --line: rgba(21, 22, 29, 0.14); --line-strong: rgba(21, 22, 29, 0.34); --accent-soft: rgba(138, 90, 0, 0.08); --accent-line: rgba(138, 90, 0, 0.45); --overlay: rgba(247, 245, 239, 0.8); --code-bg: #14161f; --code-text: #e8eaf4; --page-glow-1: rgba(120, 110, 220, 0.10); --page-glow-2: rgba(200, 140, 60, 0.10); --rail-bg: rgba(255, 255, 255, 0.88); --stars: transparent; --shadow-1: 0 1px 2px rgba(21, 22, 29, 0.12); --shadow-2: 0 18px 50px rgba(21, 22, 29, 0.12); } } /* ---- light theme: chosen with the toggle (same values as above) ---------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #f7f5ef; --surface: #ffffff; --text: #15161d; --muted: #565b70; --accent: #8a5a00; --danger: #b3261e; --ok: #17693f; --surface-solid: #ffffff; --surface-2: rgba(21, 22, 29, 0.05); --accent-hi: #6e4800; --on-accent: #ffffff; --warn: #8a5a00; --info: #0b5a85; --line: rgba(21, 22, 29, 0.14); --line-strong: rgba(21, 22, 29, 0.34); --accent-soft: rgba(138, 90, 0, 0.08); --accent-line: rgba(138, 90, 0, 0.45); --overlay: rgba(247, 245, 239, 0.8); --code-bg: #14161f; --code-text: #e8eaf4; --page-glow-1: rgba(120, 110, 220, 0.10); --page-glow-2: rgba(200, 140, 60, 0.10); --rail-bg: rgba(255, 255, 255, 0.88); --stars: transparent; --shadow-1: 0 1px 2px rgba(21, 22, 29, 0.12); --shadow-2: 0 18px 50px rgba(21, 22, 29, 0.12); }