/* GENERATED by design/palette_theme.py -- do not edit by hand. * Both pages read their colour from here and define none of their own. * Default palette: Vermilion & Gold. A viewer's choice is stamped as * data-pal on by the boot script, before first paint. */ :root { --bg: #F7FBFC; --deep: #D6ECF0; --panel: #F8EDC8; --line: #A8BDC2; --ink: #24313A; --mute: #37464F; --sig: #C23500; --sigtext: #622A1D; --pure: #FF4C00; --cta: #EACD76; --ctatext: #622A1D; --page-bg: #F7FBFC; --good: #1A8453; --good-bg: #D9EEE7; --good-ink: #18774B; --warn: #9C6915; --warn-bg: #F0EBDC; --warn-ink: #906113; --bad: #CE3F2E; --bad-bg: #F2E1DF; --bad-ink: #B93829; --id-earth: #91421C; --id-kritim: #236879; --bg-raised: var(--panel); --bg-card: var(--panel); --well: var(--deep); --ink-2: var(--mute); --ink-3: color-mix(in srgb, var(--mute) 72%, var(--bg)); --accent: var(--sig); --accent-hot: var(--pure); --accent-dim: color-mix(in srgb, var(--sig) 78%, var(--bg)); --water: var(--sig); --on-accent: var(--ctatext); --accent-surface: var(--cta); } /* Bone & Ink */ html[data-pal="bone-ink"] { --bg: #F2F0EB; --deep: #E7E4DC; --panel: #FBFAF7; --line: #D6D2C8; --ink: #14151A; --mute: #5C5F66; --sig: #C8362C; --sigtext: #FFFFFF; --pure: #C8362C; --cta: #C8362C; --ctatext: #FFFFFF; --page-bg: #F2F0EB; --good: #187A4D; --good-bg: #D4E4D8; --good-ink: #167147; --warn: #946414; --warn-bg: #ECE1CE; --warn-ink: #885C12; --bad: #C53C2C; --bad-bg: #EED7D1; --bad-ink: #AC3427; --id-earth: #91421C; --id-kritim: #236879; } /* Graphite & Sulphur */ html[data-pal="graphite-sulphur"] { --bg: #17181B; --deep: #0F1012; --panel: #1F2125; --line: #2E3136; --ink: #EDEDEA; --mute: #8B8F96; --sig: #E8C547; --sigtext: #17181B; --pure: #E8C547; --cta: #E8C547; --ctatext: #17181B; --page-bg: #17181B; --good: #1F9D63; --good-bg: #182B25; --good-ink: #28A169; --warn: #C8871B; --warn-bg: #30281B; --warn-ink: #C8871B; --bad: #D75748; --bad-bg: #311E1E; --bad-ink: #DB6659; --id-earth: #AE7357; --id-kritim: #538996; } /* Oxblood & Bone */ html[data-pal="oxblood-bone"] { --bg: #2A1417; --deep: #1C0D10; --panel: #33191D; --line: #4A272C; --ink: #F0E7E2; --mute: #A98C87; --sig: #E0A24A; --sigtext: #2A1417; --pure: #E0A24A; --cta: #E0A24A; --ctatext: #2A1417; --page-bg: #2A1417; --good: #1F9D63; --good-bg: #282722; --good-ink: #28A169; --warn: #C8871B; --warn-bg: #402418; --warn-ink: #C8871B; --bad: #D85B4C; --bad-bg: #421A1A; --bad-ink: #DD6E61; --id-earth: #B0775C; --id-kritim: #588C99; } /* Slate & Ice */ html[data-pal="slate-ice"] { --bg: #1B2027; --deep: #12161B; --panel: #232932; --line: #333B45; --ink: #E9EDF2; --mute: #8896A5; --sig: #7FC4E8; --sigtext: #12161B; --pure: #7FC4E8; --cta: #7FC4E8; --ctatext: #12161B; --page-bg: #1B2027; --good: #1F9D63; --good-bg: #1C322F; --good-ink: #3AA976; --warn: #C8871B; --warn-bg: #332E25; --warn-ink: #C98920; --bad: #DA6254; --bad-bg: #352428; --bad-ink: #DD6E61; --id-earth: #B27B60; --id-kritim: #5C8F9C; } /* Sand & Terracotta */ html[data-pal="sand-terracotta"] { --bg: #E8DFD1; --deep: #DDD2C0; --panel: #F2EBE0; --line: #C9BCA6; --ink: #241E18; --mute: #6B6055; --sig: #B4471F; --sigtext: #FFFFFF; --pure: #B4471F; --cta: #B4471F; --ctatext: #FFFFFF; --page-bg: #E8DFD1; --good: #167147; --good-bg: #CCD6C2; --good-ink: #146841; --warn: #845912; --warn-bg: #E4D3B8; --warn-ink: #7C5411; --bad: #B03627; --bad-bg: #E5C9BA; --bad-ink: #A03124; --id-earth: #91421C; --id-kritim: #236879; } /* Black & Bone */ html[data-pal="black-bone"] { --bg: #0B0B0C; --deep: #000000; --panel: #141416; --line: #26262A; --ink: #F4F3F0; --mute: #85858B; --sig: #F4F3F0; --sigtext: #0B0B0C; --pure: #F4F3F0; --cta: #F4F3F0; --ctatext: #0B0B0C; --page-bg: #0B0B0C; --good: #1F9D63; --good-bg: #0E1F18; --good-ink: #1F9D63; --warn: #C8871B; --warn-bg: #251C0E; --warn-ink: #C8871B; --bad: #D54B3B; --bad-bg: #271211; --bad-ink: #D75748; --id-earth: #A96C4E; --id-kritim: #4B8391; } /* Vermilion & Gold */ html[data-pal="vermilion-gold"] { --bg: #F7FBFC; --deep: #D6ECF0; --panel: #F8EDC8; --line: #A8BDC2; --ink: #24313A; --mute: #37464F; --sig: #C23500; --sigtext: #622A1D; --pure: #FF4C00; --cta: #EACD76; --ctatext: #622A1D; --page-bg: #F7FBFC; --good: #1A8453; --good-bg: #D9EEE7; --good-ink: #18774B; --warn: #9C6915; --warn-bg: #F0EBDC; --warn-ink: #906113; --bad: #CE3F2E; --bad-bg: #F2E1DF; --bad-ink: #B93829; --id-earth: #91421C; --id-kritim: #236879; } /* Palette switcher. Deliberately quiet: it is a preference, not a call to action, so it never competes with the CTA beside it. */ .pal { position: relative; display: flex; align-items: center; } .pal-b { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; background: transparent; border: 1px solid var(--line); cursor: pointer; color: var(--mute); font: inherit; line-height: 1; } .pal-b:hover { border-color: var(--sig); } .pal-b .sw { display: flex; gap: 3px; } .pal-b .sw i, .pal-o .sw i { width: 9px; height: 14px; display: block; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); } .pal-o { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 232px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 16%, transparent); padding: 6px; display: none; } .pal-o[data-open] { display: block; } .pal-o button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: 0; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .04em; color: var(--ink); text-align: left; } .pal-o button:hover { background: color-mix(in srgb, var(--sig) 12%, transparent); } .pal-o button[aria-checked="true"] { color: var(--sig); font-weight: 600; } .pal-o .sw { display: flex; gap: 3px; flex: 0 0 auto; } .pal-b:focus-visible, .pal-o button:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; } /* only the nav is tight enough to need the label gone -- a bare swatch button in a footer reads as decoration, not a control */ @media (max-width: 620px) { .nav .pal-b .lbl, header .pal-b .lbl { display: none; } }