/* =========================================================== Duskvein — Design Tokens All colors, spacing, and type are defined as CSS variables. Accent color and font choice are swapped at runtime via the Tweaks panel (writing data-* attributes onto ). =========================================================== */ :root { /* --- Surface (warm-cool void) --- */ --void: #07050a; --pitch: #0c0810; --char: #15101a; --crypt: #1d1722; --stone: #2b2330; --ash: #4a3f4a; --fog: #756a76; /* --- Foreground (bone & parchment) --- */ --bone: #efe6d2; --bone-soft: #d8cdb6; --parchment: #b0a48a; --muted: #847a6a; --silver: #9a8f7e; /* --- Accent (default: oxblood — swapped by Tweaks) --- */ --accent: #8b1a1a; --accent-bright: #b8211b; --accent-glow: rgba(184, 33, 27, 0.45); --accent-soft: rgba(184, 33, 27, 0.12); --accent-deep: #4a0b0b; /* --- Type --- */ --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.875rem; --fs-2xl: 2.5rem; --fs-3xl: 3.5rem; --fs-4xl: 5rem; --fs-hero: clamp(4rem, 12vw, 10rem); /* --- Spacing --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* --- Layout --- */ --container: 1200px; --container-narrow: 760px; --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; /* --- Motion --- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); } /* --- Accent swatch swaps (Tweaks) --- */ html[data-accent="oxblood"] { --accent: #8b1a1a; --accent-bright: #b8211b; --accent-glow: rgba(184, 33, 27, 0.45); --accent-soft: rgba(184, 33, 27, 0.12); --accent-deep: #4a0b0b; } html[data-accent="amber"] { --accent: #b8761d; --accent-bright: #e09a2b; --accent-glow: rgba(224, 154, 43, 0.45); --accent-soft: rgba(224, 154, 43, 0.12); --accent-deep: #5c3a0a; } html[data-accent="violet"] { --accent: #6b3d8f; --accent-bright: #9258c4; --accent-glow: rgba(146, 88, 196, 0.45); --accent-soft: rgba(146, 88, 196, 0.12); --accent-deep: #2f1a44; } /* --- Font pair swaps (Tweaks) --- */ html[data-fonts="cinzel"] { --font-display: 'Cinzel', serif; } html[data-fonts="cormorant"] { --font-display: 'Cormorant Garamond', serif; } html[data-fonts="fraktur"] { --font-display: 'UnifrakturMaguntia', 'Cinzel', serif; } /* --- Fog atmosphere toggle --- */ html[data-fog="off"] .atmosphere__fog, html[data-fog="off"] .atmosphere__embers { display: none; } /* --- Hero intensity --- */ html[data-intensity="subtle"] .atmosphere__embers { opacity: 0.3; } html[data-intensity="subtle"] .atmosphere__fog { opacity: 0.4; } html[data-intensity="cinematic"] .atmosphere__embers { opacity: 0.85; } html[data-intensity="cinematic"] .atmosphere__fog { opacity: 0.75; } html[data-intensity="max"] .atmosphere__embers { opacity: 1; } html[data-intensity="max"] .atmosphere__fog { opacity: 1; }