/* ========================================================================== tokens.css — AvieVoice design tokens + theme engine Loaded before app.css. Single source of truth for colors, depth, motion, and typography. Themes switch via . ========================================================================== */ /* Self-hosted variable font (no CDN, nothing leaves the server) */ @font-face { font-family: "Inter Var"; src: url("../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ---- Base palette: Graphite (default) ---- */ --bg-primary: #1a1a1c; --bg-secondary: #232326; --bg-tertiary: #2d2d31; --bg-hover: #383840; --border: #3d3d44; --text-primary: #e8e8ea; --text-secondary: #a0a0a8; --text-muted: #707078; --accent: #6b8f71; --accent-hover: #7da683; --channel-row-bg: #2e2e32; --channel-current-bg: #4a3566; --channel-user-bg: #352648; --channel-user-hover-bg: #3f2d54; --danger: #c45c5c; --danger-hover: #d46e6e; --success: #5a9e5a; --success-hover: #6bb06b; --speaking: #5cb85c; --audio-idle: #666; --link: #8fbc8f; /* ---- Semantic accents (previously hard-coded) ---- */ --info: #7ec8e3; /* mail unread */ --music-live: #357abd; /* music available (not yet listening) */ --music-listening: #6fcf97; /* actively listening; fixed across themes */ --gold: #e6c200; /* dice rolls */ --live: #ff4040; /* LIVE broadcast */ --dm-text: #7ddc7d; /* direct-message body (was #00ff00) */ --debug-text: #9fd49f; /* ---- Ambient background hues ---- */ --ambient-a: rgba(107, 143, 113, 0.07); --ambient-b: rgba(74, 53, 102, 0.07); /* ---- Depth / elevation ---- */ --glass-bg: rgba(35, 35, 38, 0.78); --glass-border: rgba(255, 255, 255, 0.08); --elev-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --elev-2: 0 4px 10px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.22); --elev-3: 0 10px 28px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.26); --elev-4: 0 22px 56px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3); --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* ---- Shape / layout ---- */ --radius: 8px; --radius-lg: 14px; --panel-width: 240px; /* ---- Typography ---- */ --font: "Inter Var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace; --chat-font-scale: 1; /* ---- Motion ---- */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.14s; --dur-med: 0.26s; --dur-slow: 0.45s; /* ---- Scrollbars ---- */ --scrollbar-size: 10px; --scrollbar-track: var(--bg-primary); --scrollbar-thumb: #454549; --scrollbar-thumb-hover: #5a5a60; color-scheme: dark; } /* ========================================================================== Themes ========================================================================== */ [data-theme="midnight"] { --bg-primary: #0d1117; --bg-secondary: #131a24; --bg-tertiary: #1b2430; --bg-hover: #243040; --border: #283648; --text-primary: #dce6f2; --text-secondary: #93a4ba; --text-muted: #5d6f85; --accent: #5b8def; --accent-hover: #74a1f5; --channel-row-bg: #16202c; --channel-current-bg: #233d63; --channel-user-bg: #1b2f4d; --channel-user-hover-bg: #22395c; --link: #79a8f0; --speaking: #4fc77a; --dm-text: #7dd4dc; --ambient-a: rgba(91, 141, 239, 0.08); --ambient-b: rgba(35, 61, 99, 0.1); --glass-bg: rgba(19, 26, 36, 0.78); --scrollbar-thumb: #2c3a4d; --scrollbar-thumb-hover: #3a4c64; } [data-theme="oled"] { --bg-primary: #000000; --bg-secondary: #0a0a0c; --bg-tertiary: #131316; --bg-hover: #1e1e24; --border: #232329; --text-primary: #ededf0; --text-secondary: #9a9aa4; --text-muted: #62626c; --channel-row-bg: #0e0e12; --channel-current-bg: #2c1f44; --channel-user-bg: #1d142e; --channel-user-hover-bg: #261b3a; --ambient-a: rgba(107, 143, 113, 0.05); --ambient-b: rgba(74, 53, 102, 0.06); --glass-bg: rgba(8, 8, 10, 0.82); --glass-border: rgba(255, 255, 255, 0.1); --scrollbar-track: #000; --scrollbar-thumb: #2a2a30; --scrollbar-thumb-hover: #3c3c44; } [data-theme="daylight"] { --bg-primary: #f3f4f6; --bg-secondary: #ffffff; --bg-tertiary: #eceef1; --bg-hover: #e2e5e9; --border: #d4d8dd; --text-primary: #23272d; --text-secondary: #5a6470; --text-muted: #8a93a0; --accent: #4d7a55; --accent-hover: #5d8f66; --channel-row-bg: #e9eaee; --channel-current-bg: #d9c8f0; --channel-user-bg: #eadff7; --channel-user-hover-bg: #dfd0f0; --danger: #c0392b; --danger-hover: #d35445; --success: #3f8f4a; --success-hover: #4da45a; --speaking: #2e9e4f; --audio-idle: #aab; --link: #3c7a46; --dm-text: #1d7a32; --gold: #a08600; --info: #2779a7; --debug-text: #2c6e32; --ambient-a: rgba(77, 122, 85, 0.07); --ambient-b: rgba(122, 88, 168, 0.06); --glass-bg: rgba(255, 255, 255, 0.78); --glass-border: rgba(0, 0, 0, 0.07); --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7); --elev-1: 0 1px 3px rgba(28, 36, 48, 0.12), 0 1px 2px rgba(28, 36, 48, 0.08); --elev-2: 0 4px 10px rgba(28, 36, 48, 0.13), 0 2px 4px rgba(28, 36, 48, 0.09); --elev-3: 0 10px 28px rgba(28, 36, 48, 0.16), 0 4px 10px rgba(28, 36, 48, 0.1); --elev-4: 0 22px 56px rgba(28, 36, 48, 0.2), 0 8px 20px rgba(28, 36, 48, 0.12); --scrollbar-track: #f3f4f6; --scrollbar-thumb: #c9ced5; --scrollbar-thumb-hover: #aeb6c0; color-scheme: light; } [data-theme="synthwave"] { --bg-primary: #16101f; --bg-secondary: #1d1429; --bg-tertiary: #271a36; --bg-hover: #332246; --border: #3c2a52; --text-primary: #f2e9ff; --text-secondary: #b39ecf; --text-muted: #7d6a96; --accent: #e84fa8; --accent-hover: #f368b9; --channel-row-bg: #221732; --channel-current-bg: #4d2472; --channel-user-bg: #371a52; --channel-user-hover-bg: #422063; --link: #6fd6e8; --speaking: #5ef2c0; --dm-text: #6fd6e8; --gold: #ffd24d; --info: #6fd6e8; --ambient-a: rgba(232, 79, 168, 0.1); --ambient-b: rgba(111, 214, 232, 0.07); --glass-bg: rgba(29, 20, 41, 0.78); --scrollbar-thumb: #3c2a52; --scrollbar-thumb-hover: #503a6c; } [data-theme="forest"] { --bg-primary: #141914; --bg-secondary: #1b231c; --bg-tertiary: #232e25; --bg-hover: #2d3b2f; --border: #34433a; --text-primary: #e6eee6; --text-secondary: #a3b3a4; --text-muted: #6e7e6f; --accent: #7aa874; --accent-hover: #8dbb87; --channel-row-bg: #1f2920; --channel-current-bg: #355a3c; --channel-user-bg: #28422e; --channel-user-hover-bg: #2f4e37; --link: #9ecf98; --dm-text: #9ecf98; --ambient-a: rgba(122, 168, 116, 0.09); --ambient-b: rgba(53, 90, 60, 0.1); --glass-bg: rgba(27, 35, 28, 0.78); --scrollbar-thumb: #34433a; --scrollbar-thumb-hover: #45584c; } [data-theme="contrast"] { --bg-primary: #000000; --bg-secondary: #0d0d0d; --bg-tertiary: #1a1a1a; --bg-hover: #2e2e2e; --border: #6e6e6e; --text-primary: #ffffff; --text-secondary: #d8d8d8; --text-muted: #ababab; --accent: #44c767; --accent-hover: #5fdd81; --channel-row-bg: #111; --channel-current-bg: #4f2d85; --channel-user-bg: #321d57; --channel-user-hover-bg: #3e2569; --danger: #ff5c5c; --danger-hover: #ff7676; --speaking: #44e07a; --audio-idle: #999; --link: #6fd0ff; --dm-text: #6fff8e; --ambient-a: transparent; --ambient-b: transparent; --glass-bg: rgba(0, 0, 0, 0.92); --glass-border: rgba(255, 255, 255, 0.3); } [data-theme="pony"] { --bg-primary: #fff5fa; --bg-secondary: #ffffff; --bg-tertiary: #f0f4ff; --bg-hover: #e8ecff; --border: #e0d4f0; --text-primary: #3d2a4a; --text-secondary: #6b5580; --text-muted: #9a88aa; --accent: #e879a8; --accent-hover: #f093b8; --channel-row-bg: #fce7f3; --channel-current-bg: #c4b5fd; --channel-user-bg: #ddd6fe; --channel-user-hover-bg: #d0c4fd; --danger: #e11d48; --success: #10b981; --speaking: #34d399; --audio-idle: #a78bfa; --link: #8b5cf6; --dm-text: #059669; --gold: #d97706; --info: #38bdf8; --ambient-a: rgba(255, 182, 193, 0.2); --ambient-b: rgba(167, 243, 208, 0.18); --glass-bg: rgba(255, 255, 255, 0.82); --glass-border: rgba(0, 0, 0, 0.06); --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); --elev-1: 0 1px 3px rgba(120, 80, 140, 0.1), 0 1px 2px rgba(120, 80, 140, 0.07); --elev-2: 0 4px 10px rgba(120, 80, 140, 0.12), 0 2px 4px rgba(120, 80, 140, 0.08); --scrollbar-track: #fff5fa; --scrollbar-thumb: #e0d4f0; --scrollbar-thumb-hover: #c4b5fd; color-scheme: light; } [data-theme="phoenix"] { --bg-primary: #120818; --bg-secondary: #1a0c22; --bg-tertiary: #2a1030; --bg-hover: #381840; --border: #4a2058; --text-primary: #ffeef8; --text-secondary: #d4a0c8; --text-muted: #9a6890; --accent: #ff3366; --accent-hover: #ff5580; --channel-row-bg: #220e28; --channel-current-bg: #6622cc; --channel-user-bg: #4a1880; --channel-user-hover-bg: #551e90; --link: #ffcc00; --speaking: #00ff88; --dm-text: #ffcc00; --gold: #ffcc00; --info: #00ccff; --ambient-a: rgba(255, 51, 102, 0.14); --ambient-b: rgba(102, 34, 204, 0.12); --glass-bg: rgba(26, 12, 34, 0.8); --scrollbar-thumb: #4a2058; --scrollbar-thumb-hover: #6622cc; } [data-theme="avie"] { --bg-primary: #08051a; --bg-secondary: #0f0a28; --bg-tertiary: #1a1035; --bg-hover: #241845; --border: #322060; --text-primary: #f0e8ff; --text-secondary: #b8a0d8; --text-muted: #7868a0; --accent: #a855f7; --accent-hover: #c084fc; --channel-row-bg: #120c30; --channel-current-bg: #4c1d95; --channel-user-bg: #3b1578; --channel-user-hover-bg: #451a88; --link: #22d3ee; --speaking: #22d3ee; --dm-text: #22d3ee; --gold: #fbbf24; --info: #22d3ee; --ambient-a: rgba(168, 85, 247, 0.14); --ambient-b: rgba(34, 211, 238, 0.1); --glass-bg: rgba(15, 10, 40, 0.8); --scrollbar-thumb: #322060; --scrollbar-thumb-hover: #4c1d95; } [data-theme="ascorbic"] { --bg-primary: #1a1008; --bg-secondary: #22160c; --bg-tertiary: #2a1c0c; --bg-hover: #382614; --border: #4a3418; --text-primary: #fff4e6; --text-secondary: #d4a878; --text-muted: #9a7048; --accent: #ff9500; --accent-hover: #ffaa33; --channel-row-bg: #261a0e; --channel-current-bg: #cc5500; --channel-user-bg: #993f00; --channel-user-hover-bg: #b34800; --link: #ffb347; --speaking: #ffcc00; --dm-text: #ffb347; --gold: #ffcc00; --ambient-a: rgba(255, 149, 0, 0.14); --ambient-b: rgba(204, 85, 0, 0.1); --glass-bg: rgba(34, 22, 12, 0.8); --scrollbar-thumb: #4a3418; --scrollbar-thumb-hover: #cc5500; } [data-theme="coral"] { --bg-primary: #1a1218; --bg-secondary: #221820; --bg-tertiary: #2a1a24; --bg-hover: #382430; --border: #4a3040; --text-primary: #ffeef4; --text-secondary: #d4a0b8; --text-muted: #9a6880; --accent: #ff6b8a; --accent-hover: #ff8aa3; --channel-row-bg: #241820; --channel-current-bg: #2dd4bf; --channel-user-bg: #1a9080; --channel-user-hover-bg: #22a090; --link: #2dd4bf; --speaking: #ff6b8a; --dm-text: #2dd4bf; --info: #2dd4bf; --ambient-a: rgba(255, 107, 138, 0.12); --ambient-b: rgba(45, 212, 191, 0.1); --glass-bg: rgba(34, 24, 32, 0.8); --scrollbar-thumb: #4a3040; --scrollbar-thumb-hover: #ff6b8a; } [data-theme="arctic"] { --bg-primary: #0a1420; --bg-secondary: #0e1a28; --bg-tertiary: #142030; --bg-hover: #1c2a40; --border: #243850; --text-primary: #e8f4ff; --text-secondary: #94b8d8; --text-muted: #5a80a0; --accent: #7dd3fc; --accent-hover: #a5e4ff; --channel-row-bg: #101c2c; --channel-current-bg: #1e4a6e; --channel-user-bg: #163858; --channel-user-hover-bg: #1a4268; --link: #bae6fd; --speaking: #7dd3fc; --dm-text: #bae6fd; --info: #7dd3fc; --ambient-a: rgba(125, 211, 252, 0.1); --ambient-b: rgba(30, 74, 110, 0.12); --glass-bg: rgba(14, 26, 40, 0.8); --scrollbar-thumb: #243850; --scrollbar-thumb-hover: #1e4a6e; } [data-theme="ember"] { --bg-primary: #1a0a0a; --bg-secondary: #221010; --bg-tertiary: #2a1414; --bg-hover: #381c1c; --border: #4a2424; --text-primary: #ffe8e8; --text-secondary: #d49090; --text-muted: #9a5858; --accent: #ef4444; --accent-hover: #f87171; --channel-row-bg: #241010; --channel-current-bg: #7f1d1d; --channel-user-bg: #5c1515; --channel-user-hover-bg: #6a1818; --link: #fca5a5; --speaking: #f87171; --dm-text: #fca5a5; --live: #ff2020; --ambient-a: rgba(239, 68, 68, 0.12); --ambient-b: rgba(127, 29, 29, 0.14); --glass-bg: rgba(34, 16, 16, 0.8); --scrollbar-thumb: #4a2424; --scrollbar-thumb-hover: #7f1d1d; } [data-theme="lavender"] { --bg-primary: #f8f5ff; --bg-secondary: #ffffff; --bg-tertiary: #ede9fe; --bg-hover: #e0d8fc; --border: #d4c8f0; --text-primary: #2e1065; --text-secondary: #5b4580; --text-muted: #8b78a8; --accent: #8b5cf6; --accent-hover: #a78bfa; --channel-row-bg: #ede9fe; --channel-current-bg: #ddd6fe; --channel-user-bg: #e9e0ff; --channel-user-hover-bg: #ddd0ff; --danger: #dc2626; --success: #7c3aed; --speaking: #8b5cf6; --audio-idle: #a78bfa; --link: #6d28d9; --dm-text: #5b21b6; --ambient-a: rgba(139, 92, 246, 0.1); --ambient-b: rgba(221, 214, 254, 0.25); --glass-bg: rgba(255, 255, 255, 0.82); --glass-border: rgba(0, 0, 0, 0.06); --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); --scrollbar-track: #f8f5ff; --scrollbar-thumb: #d4c8f0; --scrollbar-thumb-hover: #a78bfa; color-scheme: light; } [data-theme="terminal"] { --bg-primary: #0a0a0a; --bg-secondary: #0c100c; --bg-tertiary: #0f1a0f; --bg-hover: #142014; --border: #1a301a; --text-primary: #33ff66; --text-secondary: #22cc55; --text-muted: #15803d; --accent: #33ff66; --accent-hover: #66ff88; --channel-row-bg: #0c140c; --channel-current-bg: #1a4d1a; --channel-user-bg: #143814; --channel-user-hover-bg: #184418; --danger: #ff4444; --success: #33ff66; --speaking: #66ff88; --audio-idle: #15803d; --link: #66ff88; --dm-text: #33ff66; --debug-text: #22cc55; --ambient-a: rgba(51, 255, 102, 0.06); --ambient-b: rgba(26, 77, 26, 0.08); --glass-bg: rgba(10, 16, 10, 0.88); --glass-border: rgba(51, 255, 102, 0.15); --scrollbar-track: #0a0a0a; --scrollbar-thumb: #1a301a; --scrollbar-thumb-hover: #33ff66; } [data-theme="honey"] { --bg-primary: #1a1408; --bg-secondary: #221a0c; --bg-tertiary: #2a2010; --bg-hover: #382a14; --border: #4a3818; --text-primary: #fff8e8; --text-secondary: #d4b878; --text-muted: #9a8048; --accent: #fbbf24; --accent-hover: #fcd34d; --channel-row-bg: #241c0e; --channel-current-bg: #92400e; --channel-user-bg: #704008; --channel-user-hover-bg: #804a0a; --link: #fcd34d; --speaking: #fbbf24; --dm-text: #fcd34d; --gold: #fbbf24; --ambient-a: rgba(251, 191, 36, 0.12); --ambient-b: rgba(146, 64, 14, 0.12); --glass-bg: rgba(34, 26, 12, 0.8); --scrollbar-thumb: #4a3818; --scrollbar-thumb-hover: #92400e; } [data-theme="mocha"] { --bg-primary: #1c1410; --bg-secondary: #241a14; --bg-tertiary: #2a2018; --bg-hover: #382c22; --border: #4a3c30; --text-primary: #f5ebe0; --text-secondary: #c4a882; --text-muted: #8a7358; --accent: #c4a882; --accent-hover: #d4bc98; --channel-row-bg: #221a14; --channel-current-bg: #6b4c30; --channel-user-bg: #523820; --channel-user-hover-bg: #5e4028; --link: #d4bc98; --speaking: #e8c878; --dm-text: #d4bc98; --gold: #e8c878; --ambient-a: rgba(196, 168, 130, 0.1); --ambient-b: rgba(107, 76, 48, 0.12); --glass-bg: rgba(36, 26, 20, 0.82); --scrollbar-thumb: #4a3c30; --scrollbar-thumb-hover: #6b4c30; } [data-theme="ink"] { --bg-primary: #0c0a08; --bg-secondary: #141008; --bg-tertiary: #1a1612; --bg-hover: #282018; --border: #3a3028; --text-primary: #e8dcc8; --text-secondary: #b8a890; --text-muted: #786858; --accent: #c41e3a; --accent-hover: #d93850; --channel-row-bg: #12100c; --channel-current-bg: #8b1528; --channel-user-bg: #6b1018; --channel-user-hover-bg: #781420; --link: #e8dcc8; --speaking: #c41e3a; --dm-text: #d4a890; --danger: #c41e3a; --live: #c41e3a; --ambient-a: rgba(196, 30, 58, 0.08); --ambient-b: rgba(232, 220, 200, 0.04); --glass-bg: rgba(20, 16, 8, 0.88); --glass-border: rgba(232, 220, 200, 0.08); --scrollbar-track: #0c0a08; --scrollbar-thumb: #3a3028; --scrollbar-thumb-hover: #c41e3a; } [data-theme="aurora"] { --bg-primary: #060810; --bg-secondary: #0a0e18; --bg-tertiary: #0a1420; --bg-hover: #101c30; --border: #182840; --text-primary: #e0f0f8; --text-secondary: #88b8c8; --text-muted: #507080; --accent: #34d399; --accent-hover: #5eead4; --channel-row-bg: #081018; --channel-current-bg: #1a4060; --channel-user-bg: #143048; --channel-user-hover-bg: #183858; --link: #a78bfa; --speaking: #34d399; --dm-text: #a78bfa; --info: #67e8f9; --ambient-a: rgba(52, 211, 153, 0.12); --ambient-b: rgba(167, 139, 250, 0.1); --glass-bg: rgba(10, 14, 24, 0.82); --scrollbar-thumb: #182840; --scrollbar-thumb-hover: #34d399; } /* ========================================================================== Ambient animated background (GPU-composited; disabled by reduced modes) ========================================================================== */ body.chat-page::before, body.login-page::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(40% 38% at 22% 28%, var(--ambient-a), transparent 70%), radial-gradient(44% 42% at 78% 72%, var(--ambient-b), transparent 70%); animation: ambient-drift 60s ease-in-out infinite alternate; } @keyframes ambient-drift { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(3%, 2%, 0) scale(1.06); } 100% { transform: translate3d(-2%, 3%, 0) scale(1.02); } } body.fx-reduced-data::before, body.fx-reduced-data::after { display: none !important; } /* ========================================================================== Global polish: selection, focus, reduced motion ========================================================================== */ ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text-primary); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body.fx-reduced-motion *, body.fx-reduced-motion *::before, body.fx-reduced-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }