/* ELI dark mode — night reading. Not an inverted light theme: the ground is the jungle canopy after dark, which the brand already owns. Every surface is a step of the jungle ramp, so the palette does not change identity when the lights go down. Apply with data-theme="dark" on or any subtree. Every ratio below was measured against its own surface; nothing here sits under 4.5:1 for text. */ [data-theme="dark"]{ /* ---- Surfaces: jungle ramp. One thing inverts here and it is worth stating. In light mode "deep" means DARKER than the page — the footer is a dark band on paper. In dark mode there is no useful room below the page colour, so a band separates by getting LIGHTER instead. That is why --surface-deep is above --surface-page below. Stacked deep-on-page, the old values measured 1.18:1 and the boundary was invisible; deep-on-page is now 1.71. The ladder therefore runs UPWARD from the page: page → card 1.34 → deep 1.71 → raised. Below the page there is nothing usable — see --surface-inset-edge. ---- */ --surface-page:#011E1A; /* the reading ground */ --surface-card:#013833; /* jungle-600 — the brand's own dark */ --surface-raised:#0A574E; /* jungle-500 — dialogs, menus, anything floating */ --surface-inset:#00120F; /* wells, code, quiet strips — needs --surface-inset-edge */ --surface-muted:#0A3F39; /* resting rows */ --surface-accent:rgba(234,158,93,.16); --surface-deep:#024A42; /* footers and full-width bands — 1.71 against the page */ --surface-deep-alt:var(--eli-fern-600); --surface-deep-raised:#116E63; /* a card ON a --surface-deep band — 1.67 against it */ /* An inset well cannot separate by getting darker at night: --surface-page is already near the floor, and even pure black measures only 1.20 against it. So a well is drawn with a light hairline instead of a darker fill. Apply this alongside --surface-inset every time; without it the well is invisible. */ --surface-inset-edge:inset 0 0 0 1px rgba(234,239,230,.14); /* @kind shadow */ /* A sage band goes to night sage rather than carrying its light value over, and the ink on it flips from jungle to paper (jungle would measure 1.37). */ --surface-band:var(--eli-sage-800); --surface-band-raised:var(--eli-sage-700); --text-on-band:#EAEFE6; /* 8.13 on the band */ /* ---- Text: warm paper, never pure white ---- */ --text-body:#EAEFE6; /* 13.98 on page, 11.14 on card */ --text-heading:var(--eli-fern-200); /* 10.80 on page, 8.61 on card */ --text-muted:var(--eli-sage-300); /* 9.90 on page, 7.89 on card */ --text-accent:var(--eli-clay-300); /* 9.61 on page, 7.65 on card */ --text-inverse:var(--eli-jungle-700); /* for the rare light surface */ --text-on-accent:var(--eli-jungle-600); /* unchanged — 5.91 on clay */ /* Decorative only. Brighter than in light mode so it still reads as a mark rather than disappearing into the ground, but still not for text. */ --decor-soft:var(--eli-sage-500); /* Hand-drawn brand icons. Paperwhite is wrong here — it glares against the canopy and reads brighter than any text on the page. Fern-300 clears the 3:1 non-text threshold on every dark surface including the sage band, which is where the site actually places them: 8.82 on the page, 6.56 on a card, 4.79 on --surface-band. Kept as a ramp reference, not a loose hex, so it stays in tune if the ramp is ever retuned. */ --icon-brand:var(--eli-fern-300); /* ---- Lines: light on dark, the mirror of the light theme ---- */ --border-hairline:rgba(234,239,230,.12); --border-soft:rgba(234,239,230,.20); --border-strong:rgba(234,239,230,.34); --border-accent:var(--eli-clay-400); --border-sage:var(--eli-sage-600); /* ---- Interactive ---- */ --accent:var(--eli-clay-400); --accent-hover:var(--eli-clay-300); --accent-press:var(--eli-clay-500); --action:var(--eli-fern-500); /* paper label on it measures 4.63 */ --action-hover:var(--eli-fern-400); --action-press:var(--eli-fern-600); --focus-ring:var(--eli-fern-300); /* 7.85 on page */ --status-progress:var(--eli-clay-400); --status-done:var(--eli-fern-300); --status-resting:var(--eli-sage-500); /* ---- Light play: the sun is gone, so the washes cool and weaken ---- */ --light-warm:rgba(234,158,93,.10); --light-canopy:rgba(140,191,164,.10); --wash-paper:linear-gradient(180deg,#013833 0%,#011E1A 100%); /* @kind color */ --wash-canopy:linear-gradient(180deg,#00120F 0%,#011E1A 100%); /* @kind color */ --wash-sunlight:radial-gradient(120% 90% at 50% -10%,rgba(140,191,164,.10) 0%,rgba(1,37,32,0) 70%); /* @kind color */ /* ---- Elevation: shadow alone cannot read on a dark ground, so raised surfaces gain a top highlight as well as a shadow. ---- */ --shadow-sm:0 1px 2px rgba(0,0,0,.40),inset 0 1px 0 rgba(234,239,230,.06); /* @kind shadow */ --shadow-md:0 6px 18px rgba(0,0,0,.46),inset 0 1px 0 rgba(234,239,230,.07); /* @kind shadow */ --shadow-lg:0 18px 44px rgba(0,0,0,.52),inset 0 1px 0 rgba(234,239,230,.08); /* @kind shadow */ --shadow-press:inset 0 2px 5px rgba(0,0,0,.42); /* @kind shadow */ --paper-edge:0 0 0 1px rgba(234,239,230,.10); /* @kind shadow */ }