/* ================================================================
theme-earth.css — "Two Skies", the Temples of Earth design system.
A token layer. Link it AFTER /shared/brand.css:
It redefines the same --t-* / --font-* tokens the pages already
read, so no page markup changes to wear it.
Night takes its ground from the Cosmic mat, day from the Heaven on
Earth mat. Ink is the mat's own indigo. See plans/DESIGN-SYSTEMS.md.
TYPE: the Ubuntu family stays (Truman, 2026-09-18). It is already
self-hosted. What changes is how it is set: display sizes drop to
weight 300, so headlines read like the mat's linework.
================================================================ */
/* ── Night (default, as in brand.css) ── */
:root {
--t-bg: #0F0E24; --t-sf: #161533; --t-cd: #1D1B42; --t-hv: #272455;
--t-tx: #EEEAFB; --t-t2: #B5B0DC; --t-mt: #807BB0; --t-dm: #48447A;
--t-bd: #2F2C61; --t-b2: #211F4B; --t-bc: rgba(95, 224, 190, 0.14);
--t-ac: #5FE0BE; --t-a2: #B99BFF;
--t-ok: #5FE0BE; --t-wn: #E8D04A; --t-er: #FF8096;
--t-glass: rgba(15, 14, 36, 0.88);
--t-glass-bd: rgba(238, 234, 251, 0.08);
--t-on-ac: #0F0E24;
/* The refraction line. Once per page, under the header. */
--refraction: linear-gradient(90deg, #6F45BD, #3C6FE0, #1FB7A6, #7BD06A, #F0D24A, #F2994A, #E5506E);
/* --signature was the old gradient button fill. Buttons are ink now,
so anything still reading it gets the text colour. */
--signature: var(--t-tx);
--s-radius: 6px;
--radius-sm: 4px; --radius-md: 6px; --radius-lg: 6px; --radius-xl: 6px;
--shadow-lg: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
color-scheme: dark;
}
/* ── Day ── */
:root[data-theme="light"] {
--t-bg: #EFF5F2; --t-sf: #E3EDE8; --t-cd: #FAFCFB; --t-hv: #D6E4DD;
--t-tx: #1B1A3A; --t-t2: #4A4B6B; --t-mt: #787C96; --t-dm: #B3BAC4;
--t-bd: #C9D8D1; --t-b2: #DCE7E2; --t-bc: rgba(15, 123, 108, 0.10);
--t-ac: #0F7B6C; --t-a2: #6F45BD;
--t-ok: #0F7B6C; --t-wn: #A8740C; --t-er: #B83A4B;
--t-glass: rgba(239, 245, 242, 0.9);
--t-glass-bd: rgba(27, 26, 58, 0.08);
--t-on-ac: #FFFFFF;
--shadow-lg: 0 18px 40px -18px rgba(27, 26, 58, 0.45);
color-scheme: light;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--t-bg: #EFF5F2; --t-sf: #E3EDE8; --t-cd: #FAFCFB; --t-hv: #D6E4DD;
--t-tx: #1B1A3A; --t-t2: #4A4B6B; --t-mt: #787C96; --t-dm: #B3BAC4;
--t-bd: #C9D8D1; --t-b2: #DCE7E2; --t-bc: rgba(15, 123, 108, 0.10);
--t-ac: #0F7B6C; --t-a2: #6F45BD;
--t-ok: #0F7B6C; --t-wn: #A8740C; --t-er: #B83A4B;
--t-glass: rgba(239, 245, 242, 0.9);
--t-glass-bd: rgba(27, 26, 58, 0.08);
--t-on-ac: #FFFFFF;
--shadow-lg: 0 18px 40px -18px rgba(27, 26, 58, 0.45);
color-scheme: light;
}
}
/* The refraction line under the site bar (top bar below 1100px). */
.toe-bar { border-bottom: 2px solid; border-image: var(--refraction) 1; }
@media (min-width: 1100px) { .toe-bar { border-bottom: 0; border-image: none; } }
/* Buttons are ink, not accent. Jade arrives on hover: colour is a
response. Pages carry their own button rules in page-local