/* ============================================================ AYESTOR — Design Tokens (LOCKED v1, 18 Jun 2026) Spec: docs/DESIGN-SYSTEM.md Skins switch via / data-skin="ledger". Default (no attribute) = master brand. Fonts load from Google Fonts (link in each page , or the @import below). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600&family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap'); :root{ /* --- raw brand palette (named swatches) --- */ --ay-obsidian:#0B0B0E; --ay-slate:#17171C; --ay-bone:#ECE7DD; --ay-gold:#C9A24B; --ay-gold-light:#E6C667; --ay-bronze:#7A5A2E; --aon-charcoal:#14181C; --aon-iron:#2A3138; --aon-parchment:#E7DBC3; --aon-ember:#A12E26; --aon-oxblood:#5E1B1A; --aon-ash:#6B7178; --led-void:#06090C; --led-carbon:#0F1620; --led-cool-white:#D6E6E6; --led-cyan:#2FD4E0; --led-acid:#9CFF57; --led-blood:#FF3B47; /* --- fonts --- */ --font-display:'Cinzel', serif; --font-body:'Inter', system-ui, sans-serif; /* general/UI body */ --font-lore:'EB Garamond', Georgia, serif; /* long-form lore */ --font-data:'IBM Plex Mono', ui-monospace, monospace; /* --- semantic roles (MASTER skin = default) --- */ --color-ground: var(--ay-obsidian); --color-surface: var(--ay-slate); --color-text: var(--ay-bone); --color-text-muted: #B8B2A6; --color-accent: var(--ay-gold); --color-accent-2: var(--ay-gold-light); --color-accent-deep: var(--ay-bronze); --color-alert: var(--led-blood); --color-line: rgba(255,255,255,.08); --skin-display: var(--font-display); --skin-body: var(--font-body); } /* --- AONAITHAR skin --- */ [data-skin="aonaithar"]{ --color-ground: var(--aon-charcoal); --color-surface: var(--aon-iron); --color-text: var(--aon-parchment); --color-text-muted: var(--aon-ash); --color-accent: var(--aon-ember); --color-accent-2: var(--aon-ember); --color-accent-deep: var(--aon-oxblood); --color-line: rgba(231,219,195,.16); --skin-display: var(--font-display); /* Cinzel */ --skin-body: var(--font-lore); /* EB Garamond for lore */ } /* --- THE LEDGER skin --- */ [data-skin="ledger"]{ --color-ground: var(--led-void); --color-surface: var(--led-carbon); --color-text: var(--led-cool-white); --color-text-muted: #7F9A9A; --color-accent: var(--led-cyan); --color-accent-2: var(--led-acid); --color-accent-deep: #1B8E97; --color-alert: var(--led-blood); --color-line: rgba(47,212,224,.20); --skin-display: 'Chakra Petch', sans-serif; --skin-body: var(--font-body); /* Inter */ } /* ============================================================ Minimal base — wires the tokens to the page. Component styles live elsewhere; this is just the foundation. ============================================================ */ body{ margin:0; background:var(--color-ground); color:var(--color-text); font-family:var(--skin-body); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--skin-display); line-height:1.15; } code,kbd,samp,.is-data{ font-family:var(--font-data); } a{ color:var(--color-accent); } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }