/* ============================================================================ * AUDIORA — assets/css/tokens.css * The canonical design foundation. Every page/room links this FIRST; nothing * hardcodes a hex. Warm dark glass-morphism, gold/teal identity, * Syne / DM Sans / Space Mono, ambient depth. * * Per-room accent is set via — the page inherits the * whole system and only its accent changes. * ========================================================================== */ :root { /* ── background layers (depth) ── */ --bg: #060404; --bg2: #0a0706; --surface: #0e0a08; --raised: #161010; /* ── identity accents ── */ --gold: #d4a04a; --gold-lt: #e8b85c; --gold-dk: #a87830; --teal: #00c8d4; --teal-lt: #00e0ec; --magenta: #d8679b; --magenta-lt: #e88bb6; --red: #e03c3c; --green: #46c98b; --violet: #8b6cd4; --azure: #4a9fd4; /* room accent (default = gold) — overridden per data-room below */ --accent: var(--gold); --accent-lt: var(--gold-lt); --accent-rgb: 212,160,74; /* ── text ── */ --text: #ede5da; --text2: #c4b8aa; --muted: #9d8770; /* clears WCAG AA 4.5:1 on --bg for small text */ --faint: #6f5d4d; --inverse: #1a0e04; /* ── borders ── */ --border: rgba(255,255,255,0.065); --border-default:rgba(255,255,255,0.10); --border-strong: rgba(var(--accent-rgb),0.45); /* ── type ── */ --f-display:'Syne',sans-serif; --f-body:'DM Sans',sans-serif; --f-mono:'Space Mono',monospace; --text-xs:11px; --text-sm:13px; --text-base:15px; --text-md:19px; --text-lg:24px; --text-xl:33px; --text-2xl:46px; --text-3xl:64px; /* ── spacing (8px grid) ── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px; /* ── radii ── */ --r:10px; --r-sm:6px; --r-lg:16px; --r-pill:999px; /* ── motion ── */ --ease:cubic-bezier(0.16,1,0.3,1); --ease-out:cubic-bezier(0.0,0.0,0.2,1); --micro:160ms; --trans:240ms; --entry:420ms; /* ── glass ── */ --glass-bg:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0)); --glass-blur:10px; --shadow:0 8px 28px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.03) inset; --shadow-lg:0 24px 64px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset; /* ── layout ── */ --maxw:1240px; --nav-h:68px; } /* per-room accent themes (registry colours) */ body[data-room="house"], body[data-room="foyer"], body[data-room="console"], body[data-room="landing"], body[data-room="events"] { --accent:var(--gold); --accent-lt:var(--gold-lt); --accent-rgb:212,160,74; } body[data-room="studio"] { --accent:var(--teal); --accent-lt:var(--teal-lt); --accent-rgb:0,200,212; } body[data-room="lounge"], body[data-room="gallery"] { --accent:var(--magenta); --accent-lt:var(--magenta-lt); --accent-rgb:216,103,155; } body[data-room="theatre"] { --accent:var(--violet); --accent-lt:#a78fe0; --accent-rgb:139,108,212; } body[data-room="library"] { --accent:var(--azure); --accent-lt:#6fb6e0; --accent-rgb:74,159,212; } /* ── reset + base ── */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:var(--f-body); font-size:var(--text-base); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100%; overflow-x:hidden; } h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;letter-spacing:-0.01em;line-height:1.1} a{color:var(--accent-lt);text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,textarea,select{font-family:inherit;font-size:inherit} .mono{font-family:var(--f-mono)} .eyebrow{font-family:var(--f-mono);font-size:var(--text-xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--muted)} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── ambient background canvas (mounted by ambient.js) ── */ #bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none} /* ── glass panel ── */ .panel{ background:var(--glass-bg),var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); } /* ── focus floor (accessibility) ── */ :focus-visible{outline:2px solid var(--accent-lt);outline-offset:2px;border-radius:3px} /* ── ambient idle motion (opt in via .breathe) ── */ @keyframes breathe{0%,100%{opacity:0.85;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}} .breathe{animation:breathe 7s var(--ease) infinite} /* ── reduced motion ── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }