/* ============================================================ House of Luna — Token Layer v1 Ratified: docs/PHASE-R-TOKEN-PROPOSAL.md (Luna, 28 Jul 2026). Governed by HOUSE_CONSTITUTION.md §26 (The Aesthetic Laws). WIRED (Luna, 31 Jul 2026): served at /styles/tokens.css and linked as the base layer. All values RATIFIED — the five formerly-provisional values were confirmed as rendered. No raw hex downstream — components reference tokens only (a color a component can't name semantically means the layer is incomplete: extend the layer, never inline the value). ============================================================ */ /* ---- The Cast — self-hosted WOFF2 subsets (LAW 8) ---- The @font-face declarations are canonical in /public/styles/fonts.css (font DELIVERY only — no colour tokens, safe for any page to link now). Imported here so the Cast rides with the token layer once it is wired (step 4). Binaries + OFL license text + subset recipe: /public/fonts/. No third-party font CDN anywhere in the House. */ @import url('/styles/fonts.css'); :root { /* ===== Color — House core (LAW 2 material darkness / LAW 3 sacred red / LAW 4 whispering gold) ===== */ /* Ratified — Luna's locked :root */ --house-black: #1A1720; /* Charcoal Velvet — RATIFIED (AL-001). Darkness as material */ --house-paper: #EFE7D8; /* Old Page — RATIFIED. Light-first ground; voice on dark grounds */ --house-red: #6A2436; /* Garnet — RATIFIED. Sacred (LAW 3): invitation/focus/ceremony, never decoration */ --house-red-voice: #B87283; /* RATIFIED (AL-002, 31 Jul 2026). House Red speaking on dark grounds — links, quiet actions. Lifted from #B26578 (4.23:1, below AA) to clear AA on Charcoal Velvet: 4.86:1. #B26578 retired to design history */ --house-stone: #8A8375; /* RATIFIED. Warm architectural neutral — surrounds, borders */ --house-amber: #E3A34A; /* RATIFIED. The House's light (LAW 1); focus wayfinding (F-3). Not gold, not palette */ --house-brass: #A9884F; /* RATIFIED. Gold that whispers (LAW 4) — hairlines, hardware, nameplates. Decorative only */ --house-stone-text: #5C564B; /* RATIFIED. Stone as readable body/secondary text on Paper (~5.6:1) */ --house-brass-text: #6E5830; /* RATIFIED. Brass as ceremonial small-caps text on Paper (~5.0:1) */ /* RATIFIED (Luna, 31 Jul 2026 — confirmed as rendered in the material board) */ --house-black-soft: #252031; /* RATIFIED — raised surfaces on Charcoal Velvet (raised velvet panel) */ --house-paper-dim: #C9C0AE; /* RATIFIED — secondary text on dark grounds (~9.2:1 on Velvet) */ --house-stone-deep: #443F37; /* RATIFIED — deep structure/shadow: masonry joints, carved trim, recessed borders, architectural shadow */ --machine-glow: #C98A3E; /* RATIFIED — Machine warm filament (warm per the ratified glow doctrine) */ --machine-paper: #FBF6EC; /* RATIFIED — Machine paper-terminal surface (printed terminal) */ /* Compatibility aliases (F-4) — canonical names above; these persist during migration, removed when no reference survives */ --house-night: var(--house-black); --house-ivory: var(--house-paper); --house-ivory-dim: var(--house-paper-dim); /* ===== Focus — dual-ring (RATIFIED §8.5): amber INNER, Charcoal Velvet OUTER — one rule, every ground ===== */ --focus-inner: var(--house-amber); --focus-outer: var(--house-black); /* ===== Type — the Cast (LAW 8). Rooms change accent/rhythm, never the family ===== */ --font-narrator: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* body, long-form; receives & guides */ --font-architect: 'Cormorant Garamond', Georgia, serif; /* names: room labels, inscriptions, eyebrows */ --font-librarian: 'Jost', system-ui, -apple-system, sans-serif; /* counts & annotates: metadata (min 400 / 13px floor) */ --font-machine: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* reports: AI states, technical feedback */ /* Type scale (mobile-first; base 17px, ratio 1.25) */ --text-sm: 0.875rem; /* 14 */ --text-base: 1.0625rem; /* 17 */ --text-lg: 1.3125rem; /* 21 — door labels, small caps */ --text-xl: 1.6875rem; /* 27 */ --text-2xl: 2.125rem; /* 34 */ --text-display: 2.625rem; /* 42 (mobile) */ --leading-base: 1.6; --tracking-label: 0.08em; /* ===== Space (4px base). Ceremony uses the top of the scale; in-room chrome the bottom ===== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* ===== Z-layers. Doors always above atmosphere: decoration never blocks navigation ===== */ --z-room: 0; --z-hall-atmosphere: 10; --z-doors: 20; --z-house-map: 100; --z-threshold: 200; /* ===== Motion (LAW 6). Settle, appear, breathe — never snap ===== */ --motion-door: 400ms; --motion-quiet: 180ms; --ease-door: cubic-bezier(0.22, 1, 0.36, 1); } /* Breakpoints (custom properties can't be used inside @media; recorded here, usable in JS/container queries): floor 380 · hall 640 · wide 900 · max 1200. Mobile is default; wider viewports are the override. */ /* Display grows past the Hall breakpoint (56px desktop) */ @media (min-width: 640px) { :root { --text-display: 3.5rem; } } /* Focus — one rule, every ground (LAW 1 sourced light; §8.5 dual-ring). On dark grounds the velvet melts into the page and amber carries the 3:1; on Old Page the velvet carries it while amber glows at the element edge. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid transparent; /* forced-colors mode fallback ring */ outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-inner), /* amber inner — the object receives light first */ 0 0 0 4px var(--focus-outer); /* Charcoal Velvet outer — the shadow contains it */ border-radius: 2px; } /* Reduced motion (LAW 6 corollary): settled state is complete; breathing is atmosphere, never information */ @media (prefers-reduced-motion: reduce) { :root { --motion-door: 0ms; --motion-quiet: 0ms; } } /* Room scopes ([data-room="…"] { --room-hue/-material/-glow }) are intentionally NOT defined here. Per the Stability Declaration + LAW 5, each room's hues are chosen by eye in situ during that door's visual pass. No dead room CSS ships. */