/* ============================================================ HAUTE LUMIÈRE — colour. Seven registers, one per hour of the light, dawn to night: Aurora · Daylight · Solstice · Dusk · Vespers · Midnight · Nocturne Every register is a COMPLETE semantic palette. Set it on ; nothing else in the document changes. Switching a register is not a recolour — it ripples through ink, rules, grain blend mode and the photographic grade at once. ============================================================ */ /* Aurora — First light. Cool blue wash, airy — the warm trick run cold. */ html[data-register="aurora"]{ --paper:#F4F9FD; --paper-2:#E9F2FA; --ink:#17283A; --ink-soft:#3A5062; --text-body:#3A5062; --text-muted:#6685A0; --muted:#6685A0; --gold:#B7A667; --gold-d:#93813C; --rule:#D2E5F2; --border-light:#D2E5F2; --desk:#C3D9EC; --veil:20,42,64 /* @kind color */; --grain-blend:multiply /* @kind other */; --photo-grade:sepia(.14) hue-rotate(165deg) saturate(1.07) brightness(1.03) contrast(1.01) /* @kind other */; --image-filter:sepia(.14) hue-rotate(165deg) saturate(1.07) brightness(1.03) contrast(1.01) /* @kind other */; } /* Daylight — Noon. Pine ink on warm cream, a tasteful silver grade. */ :root, html[data-register="daylight"]{ --paper:#FAF8F3; --paper-2:#F3EFE6; --ink:#0C1E16; --ink-soft:#334A3F; --text-body:#334A3F; --text-muted:#5C7065; --muted:#5C7065; --gold:#C5A059; --gold-d:#9A7A3A; --rule:#E1E7E2; --border-light:#E1E7E2; --desk:#D6DAD4; --veil:12,30,22 /* @kind color */; --grain-blend:multiply /* @kind other */; --photo-grade:saturate(1.04) contrast(1.03) brightness(1.01) /* @kind other */; --image-filter:saturate(1.04) contrast(1.03) brightness(1.01) /* @kind other */; --panel:var(--ink) /* @kind color */; --panel-ink:var(--paper) /* @kind color */; } /* Solstice — Long afternoon. Pale butter ground, unhurried. */ html[data-register="solstice"]{ --paper:#FDF8E4; --paper-2:#F7EFD3; --ink:#3A3117; --ink-soft:#5C4F28; --text-body:#5C4F28; --text-muted:#877949; --muted:#877949; --gold:#C79A3C; --gold-d:#A2782A; --rule:#EDE3C4; --border-light:#EDE3C4; --desk:#E6DBB6; --veil:58,49,23 /* @kind color */; --grain-blend:multiply /* @kind other */; --photo-grade:sepia(.26) saturate(1.1) brightness(1.04) /* @kind other */; --image-filter:sepia(.26) saturate(1.1) brightness(1.04) /* @kind other */; } /* Dusk — Golden hour. Warmth lifted just noticeably. */ html[data-register="dusk"]{ --paper:#FBF4EA; --paper-2:#F4E8DA; --ink:#33201A; --ink-soft:#5A3C2E; --text-body:#5A3C2E; --text-muted:#7A5B4C; --muted:#7A5B4C; --gold:#D69A4C; --gold-d:#B0713C; --rule:#EDDFCE; --border-light:#EDDFCE; --desk:#E0CDB8; --veil:51,32,26 /* @kind color */; --grain-blend:multiply /* @kind other */; --photo-grade:sepia(.16) saturate(1.24) contrast(1.07) brightness(1.02) /* @kind other */; --image-filter:sepia(.16) saturate(1.24) contrast(1.07) brightness(1.02) /* @kind other */; } /* Vespers — Candlelight. Archival, toned ground, warm cream text. */ html[data-register="vespers"]{ --paper:#3A2E22; --paper-2:#463829; --ink:#F2E3C8; --ink-soft:#DCC9A6; --text-body:#DCC9A6; --text-muted:#B39B78; --muted:#B39B78; --gold:#D9AE6A; --gold-d:#C79753; --rule:#55432F; --border-light:#55432F; --desk:#241C14; --veil:36,28,20 /* @kind color */; --grain-blend:screen /* @kind other */; --photo-grade:sepia(.55) saturate(.85) contrast(1.02) /* @kind other */; --image-filter:sepia(.55) saturate(.85) contrast(1.02) /* @kind other */; --panel:var(--desk) /* @kind color */; --panel-ink:var(--ink) /* @kind color */; } /* Midnight — Cinematic blue-black. Shadows lived in. */ html[data-register="midnight"]{ --paper:#111620; --paper-2:#171E2A; --ink:#EFE8D8; --ink-soft:#CFC7B4; --text-body:#CFC7B4; --text-muted:#8E97A6; --muted:#8E97A6; --gold:#D9B472; --gold-d:#C39A56; --rule:#2A3140; --border-light:#2A3140; --desk:#080B11; --veil:5,8,14 /* @kind color */; --grain-blend:screen /* @kind other */; --photo-grade:contrast(1.14) brightness(.9) saturate(1.04) /* @kind other */; --image-filter:contrast(1.14) brightness(.9) saturate(1.04) /* @kind other */; --panel:var(--desk) /* @kind color */; --panel-ink:var(--ink) /* @kind color */; } /* Nocturne — Deep pine-green black. The last register before sleep. */ html[data-register="nocturne"]{ --paper:#0E1712; --paper-2:#131F18; --ink:#EDE6D2; --ink-soft:#C9C2AA; --text-body:#C9C2AA; --text-muted:#7E8C80; --muted:#7E8C80; --gold:#C7A468; --gold-d:#AC8B4C; --rule:#243128; --border-light:#243128; --desk:#070B08; --veil:7,13,9 /* @kind color */; --grain-blend:screen /* @kind other */; --photo-grade:sepia(.14) hue-rotate(75deg) saturate(.82) contrast(1.13) brightness(.87) /* @kind other */; --image-filter:sepia(.14) hue-rotate(75deg) saturate(.82) contrast(1.13) brightness(.87) /* @kind other */; --panel:var(--desk) /* @kind color */; --panel-ink:var(--ink) /* @kind color */; } /* on-photograph text — always cream, never the register ink */ :root{ --on-photo:#FBF8F0 /* @kind color */; --on-photo-soft:rgba(250,246,236,.78) /* @kind color */; } /* ============================================================ ALIASES Two older vocabularies resolve onto the seven registers so nothing authored against them has to be rewritten: the first-generation register names (equinox/ember/sepia/ meridian/vellum), and the web product's four environment settings (ivory/cream/sepia/moonlight) on [data-theme]. ============================================================ */ html[data-register="equinox"], html[data-theme="ivory"]{ --paper:#FAF8F3; --paper-2:#F3EFE6; --ink:#0C1E16; --ink-soft:#334A3F; --text-body:#334A3F; --text-muted:#5C7065; --muted:#5C7065; --gold:#C5A059; --gold-d:#9A7A3A; --rule:#E1E7E2; --border-light:#E1E7E2; --desk:#D6DAD4; --veil:12,30,22 /* @kind color */; --grain-blend:multiply /* @kind other */; --photo-grade:saturate(1.04) contrast(1.03) brightness(1.01) /* @kind other */; --image-filter:saturate(1.04) contrast(1.03) brightness(1.01) /* @kind other */; } html[data-register="ember"], html[data-theme="cream"]{ --paper:#FBF4EA; --paper-2:#F4E8DA; --ink:#33201A; --ink-soft:#5A3C2E; --text-body:#5A3C2E; --text-muted:#7A5B4C; --muted:#7A5B4C; --gold:#D69A4C; --gold-d:#B0713C; --rule:#EDDFCE; --border-light:#EDDFCE; --desk:#E0CDB8; --veil:51,32,26 /* @kind color */; --grain-blend:multiply /* @kind other */; --photo-grade:sepia(.16) saturate(1.24) contrast(1.07) brightness(1.02) /* @kind other */; --image-filter:sepia(.16) saturate(1.24) contrast(1.07) brightness(1.02) /* @kind other */; } html[data-register="sepia"], html[data-theme="sepia"]{ --paper:#3A2E22; --paper-2:#463829; --ink:#F2E3C8; --ink-soft:#DCC9A6; --text-body:#DCC9A6; --text-muted:#B39B78; --muted:#B39B78; --gold:#D9AE6A; --gold-d:#C79753; --rule:#55432F; --border-light:#55432F; --desk:#241C14; --veil:36,28,20 /* @kind color */; --grain-blend:screen /* @kind other */; --photo-grade:sepia(.55) saturate(.85) contrast(1.02) /* @kind other */; --image-filter:sepia(.55) saturate(.85) contrast(1.02) /* @kind other */; } html[data-register="meridian"], html[data-theme="moonlight"]{ --paper:#111620; --paper-2:#171E2A; --ink:#EFE8D8; --ink-soft:#CFC7B4; --text-body:#CFC7B4; --text-muted:#8E97A6; --muted:#8E97A6; --gold:#D9B472; --gold-d:#C39A56; --rule:#2A3140; --border-light:#2A3140; --desk:#080B11; --veil:5,8,14 /* @kind color */; --grain-blend:screen /* @kind other */; --photo-grade:contrast(1.14) brightness(.9) saturate(1.04) /* @kind other */; --image-filter:contrast(1.14) brightness(.9) saturate(1.04) /* @kind other */; } html[data-register="vellum"], html[data-theme="vellum"]{ --paper:#F4F9FD; --paper-2:#E9F2FA; --ink:#17283A; --ink-soft:#3A5062; --text-body:#3A5062; --text-muted:#6685A0; --muted:#6685A0; --gold:#B7A667; --gold-d:#93813C; --rule:#D2E5F2; --border-light:#D2E5F2; --desk:#C3D9EC; --veil:20,42,64 /* @kind color */; --grain-blend:multiply /* @kind other */; --photo-grade:sepia(.14) hue-rotate(165deg) saturate(1.07) brightness(1.03) contrast(1.01) /* @kind other */; --image-filter:sepia(.14) hue-rotate(165deg) saturate(1.07) brightness(1.03) contrast(1.01) /* @kind other */; } html[data-theme="solstice"]{ --paper:#FDF8E4; --paper-2:#F7EFD3; --ink:#3A3117; --ink-soft:#5C4F28; --text-body:#5C4F28; --text-muted:#877949; --muted:#877949; --gold:#C79A3C; --gold-d:#A2782A; --rule:#EDE3C4; --border-light:#EDE3C4; --desk:#E6DBB6; --veil:58,49,23 /* @kind color */; --grain-blend:multiply /* @kind other */; --photo-grade:sepia(.26) saturate(1.1) brightness(1.04) /* @kind other */; --image-filter:sepia(.26) saturate(1.1) brightness(1.04) /* @kind other */; } /* The grade always reaches the photograph, from either attribute. */ html[data-register] img, html[data-theme] img{ filter:var(--image-filter, none); }