/* * Theme tokens shared by every page. * * Light is the canonical design; dark deepens each ground rather than * inverting it, so the page keeps its alternating section rhythm. Pages set * grounds/text from these variables; only genuinely fixed colours (a white * button label, a screenshot's own pixels) stay literal. * * data-theme on wins over the OS preference and is written by the nav * toggle. The no-JS path still follows prefers-color-scheme. */ :root { color-scheme: light; /* Section grounds */ --ground-paper: #F5F2EC; /* cream sections */ --ground-paper-top: #FAF7F2; /* cream radial highlight */ --ground-paper-edge: #EFE9DF; /* cream radial edge */ --ground-blue: #2C4375; /* hero, workflows */ --ground-navy: #1E3252; /* deep navy */ --ground-plum: #2F1936; /* design section: plum */ --ground-dark: #171A21; /* refine section, footer band */ --ground-page: #F5F2EC; /* body behind everything */ /* Type */ --text-strong: #1E1C1A; /* headings on light grounds */ --text-body: #615C56; /* body copy on light grounds */ --text-on-dark: #FFFFFF; /* headings on coloured grounds */ --text-on-dark-muted: #D4DEEB; /* body copy on blue grounds */ --text-on-dark-neutral: #D5D8DD; /* body copy on charcoal grounds */ --text-on-plum-muted: #D6C6DD; /* body copy on plum */ /* Surfaces on light grounds */ --card: #FFFFFF; --card-border: rgba(0, 0, 0, .08); --card-shadow: 0 10px 28px rgba(0, 0, 0, .1); --field: rgba(0, 0, 0, .025); --field-border: rgba(0, 0, 0, .14); /* Lines and accents */ --dot: rgba(44, 67, 117, .18); /* dotted grid on cream */ --rule: rgba(0, 0, 0, .1); /* hairlines on light grounds */ --rule-on-dark: rgba(255, 255, 255, .14); --accent: #2C4375; /* links/accents on light grounds */ --pillar-action: #2C4375; /* overview pillar buttons */ --pillar-action-bg: rgba(44, 67, 117, .1); --pillar-action-bg-hover: rgba(44, 67, 117, .18); --accent-warm: #FF7E5F; /* coral, dark grounds only */ --accent-warm-deep: #E05A38; /* coral that holds on light grounds */ --pillar-rule: rgba(44, 67, 117, .22); --btn-solid: #171A21; /* solid CTA on light grounds */ --btn-solid-text: #FFFFFF; --title-outline: rgba(30, 28, 26, .28); /* ghost outline behind animated titles */ --title-outline-draw: rgba(30, 28, 26, .6); } html[data-theme="dark"] { color-scheme: dark; --ground-paper: #16181D; --ground-paper-top: #16181D; --ground-paper-edge: #16181D; --ground-blue: #142138; --ground-navy: #16233A; --ground-plum: #2F1936; --ground-dark: #101318; --ground-page: #16181D; --text-strong: #ECEAE6; --text-body: #A8A49E; --text-on-dark: #F4F3F1; --text-on-dark-muted: #B9C6DA; --text-on-dark-neutral: #B6B9BF; --text-on-plum-muted: #CDB6D4; --card: #1E2129; --card-border: rgba(255, 255, 255, .1); --card-shadow: 0 10px 28px rgba(0, 0, 0, .5); --field: rgba(255, 255, 255, .05); --field-border: rgba(255, 255, 255, .16); --dot: rgba(150, 175, 220, .14); --rule: rgba(255, 255, 255, .12); --rule-on-dark: rgba(255, 255, 255, .12); --accent: #8FB0E8; --pillar-action: #D3D6DB; --pillar-action-bg: rgba(255, 255, 255, .07); --pillar-action-bg-hover: rgba(255, 255, 255, .13); --accent-warm: #FF8A6B; --accent-warm-deep: #FF8A6B; --pillar-rule: rgba(180, 200, 235, .12); --btn-solid: #2E4C86; --btn-solid-text: #FFFFFF; --title-outline: rgba(236, 234, 230, .32); --title-outline-draw: rgba(236, 234, 230, .6); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; --ground-paper: #16181D; --ground-paper-top: #16181D; --ground-paper-edge: #16181D; --ground-blue: #142138; --ground-navy: #16233A; --ground-plum: #2F1936; --ground-dark: #101318; --ground-page: #16181D; --text-strong: #ECEAE6; --text-body: #A8A49E; --text-on-dark: #F4F3F1; --text-on-dark-muted: #B9C6DA; --text-on-dark-neutral: #B6B9BF; --text-on-plum-muted: #CDB6D4; --card: #1E2129; --card-border: rgba(255, 255, 255, .1); --card-shadow: 0 10px 28px rgba(0, 0, 0, .5); --field: rgba(255, 255, 255, .05); --field-border: rgba(255, 255, 255, .16); --dot: rgba(150, 175, 220, .14); --rule: rgba(255, 255, 255, .12); --rule-on-dark: rgba(255, 255, 255, .12); --accent: #8FB0E8; --pillar-action: #D3D6DB; --pillar-action-bg: rgba(255, 255, 255, .07); --pillar-action-bg-hover: rgba(255, 255, 255, .13); --pillar-action-bg: rgba(255, 255, 255, .07); --pillar-action-bg-hover: rgba(255, 255, 255, .13); --accent-warm: #FF8A6B; --accent-warm-deep: #FF8A6B; --pillar-rule: rgba(180, 200, 235, .12); --btn-solid: #2E4C86; --btn-solid-text: #FFFFFF; --title-outline: rgba(236, 234, 230, .32); --title-outline-draw: rgba(236, 234, 230, .6); } } /* Shape dividers take their colour from the section they belong to, so a single fill="currentColor" path works in both themes. */ .shape-divider svg path, .page-band svg path, .band-divider svg path { fill: currentColor; } /* Theme toggle (nav) — bare icon, no chrome */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: #fff; opacity: .85; cursor: pointer; touch-action: manipulation; transition: opacity .15s ease; } .theme-toggle:hover { opacity: 1; } .theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; } .theme-toggle svg { width: 19px; height: 19px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } html:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } }