/* shared/codex.css — the LIFE CODEX skin, one source of truth for every tool. ────────────────────────────────────────────────────────────────────────── Include on every page as the LAST stylesheet in : HOW IT WORKS: every tool already themes itself through the same CSS custom properties (--bg/--panel/--ink/--accent/…), and shared/nav.js + topbar.js inherit them through the shadow boundary. This file redefines those variables with the Codex palette, so tools and chrome re-skin together. `:root:root` outranks each tool's own `:root{}` block regardless of load order, while body-level theme classes (body.light, body.grimoire) still override it — per-tool theme switches keep working. Tokens come from the Life Codex design prototype (design notes: the artifact's "Design Codex" chapter). Fonts are NOT imported here — every tool already loads Cinzel / EB Garamond / JetBrains Mono from Google Fonts. */ :root:root { /* surfaces — deep ink-violet */ --bg: #221e2b; --grid: rgba(236, 228, 211, .03); --halo: #221e2b; --panel: #2c2738; --panel-2: #363046; --panel-3: #403a52; --line: #453d57; --line-soft: #3a3449; /* ink — warm parchment */ --ink: #ece4d3; --ink-dim: #c9bdb4; --ink-faint: #8e8399; /* the one accent: gilt */ --accent: #d8ac5c; --accent-2: #b8813c; --gold: #d8ac5c; /* status (icons/labels carry meaning, never colour alone) */ --good: #7fb069; --warn: #e08b4e; --danger: #d06a6a; /* geometry — engraved plates, not rounded apps */ --radius: 6px; --radius-sm: 4px; /* type roles */ --font-disp: 'Cinzel', 'Palatino Linotype', Georgia, serif; --font-body: 'EB Garamond', 'Noto Serif', Georgia, serif; --font-mono: 'JetBrains Mono', Consolas, ui-monospace, monospace; } /* Body text is Garamond everywhere; anything that explicitly asks for Cinzel or JetBrains Mono keeps it (those rules are more specific). */ body { font-family: var(--font-body); color: var(--ink); background: var(--bg); } ::selection { background: rgba(216, 172, 92, .28); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ————— Codex component vocabulary ————— Shared classes for NEW markup (existing tool markup keeps its own classes, which now read the tokens above). Adopt these as screens get reworked. */ .cx-plate { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 16px; min-width: 0; } .cx-plate::before { content: ""; position: absolute; inset: 4px; pointer-events: none; border: 1px solid rgba(216, 172, 92, .13); border-radius: 1px; } .cx-plate > h3 { font-family: var(--font-disp); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 12px; } .cx-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 15px; font-weight: 600; padding: 7px 18px; border-radius: 999px; cursor: pointer; color: #241f2e; background: linear-gradient(180deg, #e2ba6e, #c99a48); border: 1px solid #a87c33; } .cx-btn:hover { filter: brightness(1.07); } .cx-btn.ghost { color: var(--accent); background: none; border: 1px solid rgba(216, 172, 92, .28); } .cx-btn.ghost:hover { background: rgba(216, 172, 92, .16); filter: none; } .cx-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--ink-dim); cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; background: var(--panel-2); } .cx-chip.on { color: var(--accent); border-color: rgba(216, 172, 92, .28); background: rgba(216, 172, 92, .16); } .cx-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); } .cx-bar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; } .cx-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); } .cx-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ————— The plate signature, suite-wide ————— Every tool's cards and dialogs get the faint gilt inner keyline from the Life Codex prototype. Targets each tool's own container classes: dashboard .widget · workout/deadline .card · nutrient .panel-box · modals & popovers everywhere. Boxless/clear widgets are excluded. */ .widget:not(.boxless):not(.bg-clear):not(.bg-outline), .card, .panel-box, .modal, .pop { outline: 1px solid rgba(216, 172, 92, .13); outline-offset: -5px; }