/* ============================================================ THREE-REALM TOKEN SYSTEM The whole site shares one layout skeleton. Only tokens change. Swap [data-realm] on and the entire mood changes. ============================================================ */ :root { --maxw: 1180px; --pad: clamp(18px, 4vw, 44px); --t-fast: 160ms cubic-bezier(.4, 0, .2, 1); --t-med: 380ms cubic-bezier(.4, 0, .2, 1); --t-slow: 900ms cubic-bezier(.22, 1, .36, 1); } /* ---------- REALM 1: CELESTIAL — elegant occult ---------- Home, horoscopes, tarot, star charts, moon tracking. Deep indigo, gold leaf, violet glow, high serifs, soft edges. */ [data-realm="celestial"] { --bg: #0a0716; --bg-2: #120c26; --bg-3: #1a1233; --panel: rgba(255, 255, 255, .035); --panel-hi: rgba(255, 255, 255, .07); --line: rgba(216, 180, 92, .20); --line-soft: rgba(255, 255, 255, .07); --ink: #f1ece1; --ink-dim: #a79dbb; --ink-faint: #6f6786; --accent: #d8b45c; --accent-2: #9a7fd6; --accent-3: #5ec8c8; --grad: linear-gradient(135deg, #9a7fd6 0%, #d8b45c 100%); --radius: 16px; --radius-s: 10px; --font-d: 'Cinzel', 'Times New Roman', serif; --font-b: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Cinzel', serif; --font-mono: 'Special Elite', ui-monospace, monospace; --track: .18em; --body-size: 1.075rem; --glow: 0 0 60px -10px rgba(154, 127, 214, .45); --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='23' cy='41' r='.8' opacity='.7'/%3E%3Ccircle cx='187' cy='19' r='.6' opacity='.5'/%3E%3Ccircle cx='95' cy='120' r='1' opacity='.8'/%3E%3Ccircle cx='260' cy='88' r='.7' opacity='.6'/%3E%3Ccircle cx='140' cy='233' r='.9' opacity='.7'/%3E%3Ccircle cx='44' cy='198' r='.6' opacity='.5'/%3E%3Ccircle cx='215' cy='265' r='.8' opacity='.6'/%3E%3Ccircle cx='288' cy='170' r='.5' opacity='.45'/%3E%3Ccircle cx='66' cy='287' r='.7' opacity='.55'/%3E%3Ccircle cx='168' cy='158' r='.55' opacity='.5'/%3E%3Ccircle cx='12' cy='121' r='.65' opacity='.5'/%3E%3Ccircle cx='240' cy='38' r='.9' opacity='.65'/%3E%3C/g%3E%3C/svg%3E"); --texture-op: .55; --heading-case: none; } /* ---------- REALM 2: LIMINAL — the shared crossroads ---------- Shop, events, pricing, community. Belongs to both. Bone + brass + oxblood. */ [data-realm="liminal"] { --bg: #0b0b0f; --bg-2: #131319; --bg-3: #1b1b22; --panel: rgba(255, 255, 255, .04); --panel-hi: rgba(255, 255, 255, .075); --line: rgba(201, 162, 39, .22); --line-soft: rgba(255, 255, 255, .08); --ink: #eae7e0; --ink-dim: #9b978d; --ink-faint: #6a675f; --accent: #c9a227; --accent-2: #a2453f; --accent-3: #7d8fa8; --grad: linear-gradient(135deg, #a2453f 0%, #c9a227 100%); --radius: 8px; --radius-s: 5px; --font-d: 'Cinzel', serif; --font-b: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Oswald', sans-serif; --font-mono: 'Special Elite', monospace; --track: .2em; --body-size: 1.06rem; --glow: 0 0 50px -14px rgba(201, 162, 39, .3); --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); --texture-op: .18; --heading-case: none; } /* ---------- REALM 3: DREAD — genuine horror ---------- Horror nights, murder mysteries, the crypt. Near-black, blood, grain, flicker. */ [data-realm="dread"] { --bg: #070606; --bg-2: #0e0c0c; --bg-3: #151111; --panel: rgba(255, 255, 255, .028); --panel-hi: rgba(184, 31, 31, .09); --line: rgba(184, 31, 31, .26); --line-soft: rgba(255, 255, 255, .06); --ink: #ded7d3; --ink-dim: #8a8180; --ink-faint: #5b5453; --accent: #c0201f; --accent-2: #6e0f0f; --accent-3: #7e8a6a; --grad: linear-gradient(135deg, #6e0f0f 0%, #c0201f 100%); --radius: 2px; --radius-s: 1px; --font-d: 'Oswald', 'Arial Narrow', sans-serif; --font-b: 'Inter', system-ui, sans-serif; --font-ui: 'Oswald', sans-serif; --font-mono: 'Special Elite', monospace; --track: .26em; --body-size: 1rem; --glow: 0 0 70px -12px rgba(192, 32, 31, .38); --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"); --texture-op: .32; --heading-case: uppercase; }