/* ============================================================ VEGA PHONE — theme tokens · night sky DARK IS THE DEFAULT. Light is the opt-in, via [data-theme="light"]. That direction is deliberate and it is why :root carries the dark values: if the anti-flash script never runs — cold start, storage blocked, a crash before hydration — the app still paints as the product is meant to look, instead of flashing white. PALETTE Sampled from lyradev.ai so the two properties read as one family: void #0C1223 the deep background meridian #243050 borders ash #8790AB muted text starlight #F2F5FB primary text gold #E3B34F emphasis ROLES — the rule that keeps this from going gaudy: PERIWINKLE is what you touch. Buttons, links, active nav, your own message bubbles. It carries the gradients. GOLD is what you notice. Brand marks, starred and pinned things, Command-tier features, the one CTA that matters on a page. Gold stays special because it is rare. If gold ends up on every button, this palette is finished. GOLD vs WARNING --warning is orange (#F97316), not amber. The old #FBBF24 sat two degrees of hue from gold, which at the size of a "needs reply" dot is the same colour. Orange is 16 degrees off and, more usefully, 26 points more saturated — gold reads muted and metallic, warning reads vivid. Do not drift --warning back toward yellow. ============================================================ */ :root { /* ---- Periwinkle scale ---- */ --peri-50: #F1F2FE; --peri-100: #E4E6FD; --peri-200: #CDD0FA; --peri-300: #B0B5F7; --peri-400: #9096F7; --peri-500: #7C82F0; /* core periwinkle */ --peri-600: #6167E4; --peri-700: #5057CC; --peri-800: #4249A8; --peri-900: #363C85; /* ---- Brand · periwinkle sits one step brighter on a dark ground ---- */ --brand: var(--peri-400); --brand-deep: var(--peri-300); --brand-deeper: var(--peri-200); --brand-tint: #1B2145; --brand-tint-2: #232A55; --brand-contrast: #0B0D1C; /* ink — text on a SOLID light periwinkle fill (bubbles, avatars, unread badge): 7.25:1 */ --on-brand-grad: #FFFFFF; /* white — text on --grad-brand / --grad-bubble: 4.60:1 */ --on-brand: #0B0D1C; /* text on a SOLID --brand fill (unread badge). Flips to white in light, where --brand is dark. */ --on-status: #0B0D1C; /* text on a --success / --warning / --danger fill. Status colours are BRIGHT in dark and DARK in light, so this flips too. Ink on #16794C in light mode was the latent bug. */ /* ---- Gold · emphasis only ---- */ /* --gold is the TEXT colour, --gold-fill is the solid fill. They are the same value here and diverge in light mode, where gold has to darken to stay readable as text but must stay bright to work as a fill. */ --gold: #E3B34F; --gold-fill: #E3B34F; --gold-soft: #F0CC85; --gold-deep: #C9963A; --gold-tint: rgba(227, 179, 79, .12); --gold-line: rgba(227, 179, 79, .30); --on-gold: #1A1405; --grad-gold: linear-gradient(135deg, #F0CC85 0%, #E3B34F 55%, #C9963A 100%); /* ---- Gradients ---- */ /* Primary-action gradient. Deep on purpose: white text needs peri-600 or darker (4.60:1) — on peri-400 white is 2.66:1 and fails outright. The lighter periwinkles are still used for bubbles and badges, which carry INK text instead. Two different jobs, two different ramps. */ --grad-brand: linear-gradient(135deg, var(--peri-600) 0%, var(--peri-800) 100%); --grad-brand-vivid: linear-gradient(135deg, #A7ACFF 0%, #9096F7 50%, #6167E4 100%); --grad-brand-soft: linear-gradient(135deg, #1B2145 0%, #232A55 100%); /* Outbound bubbles follow the button: deep fill, white text. Ink on the dark end of a peri-400 -> peri-600 ramp was 4.20:1 and failed. */ --grad-bubble: linear-gradient(135deg, var(--peri-600) 0%, var(--peri-800) 100%); /* Avatars go the other way — light fill, INK initials — so a row of them does not read as a column of buttons. Ink needs peri-500 or lighter. */ --grad-avatar: linear-gradient(140deg, var(--peri-200) 0%, var(--peri-500) 100%); --grad-track: linear-gradient(90deg, var(--peri-400) 0%, var(--peri-600) 100%); --grad-success: linear-gradient(135deg, #5BE6A3 0%, #1E9B62 100%); --grad-danger: linear-gradient(135deg, #FB8C8C 0%, #C0392F 100%); /* Ambient wash — two faint radials over the void, so large screens do not read as a flat block. Sits UNDER the starfield. */ --grad-ambient: radial-gradient(1100px 620px at 12% -8%, rgba(124,130,240,.16), transparent 62%), radial-gradient(900px 520px at 105% 8%, rgba(80,87,204,.14), transparent 60%); --grad-header: linear-gradient(180deg, rgba(19,26,48,.94) 0%, rgba(19,26,48,.78) 100%); /* ---- Surfaces · a ladder up out of the void ---- */ --bg: #0C1223; --surface: #131A30; --surface-2: #1A2340; --surface-3: #232D52; --border: #243050; --border-strong: #33406A; --overlay: rgba(4, 7, 18, .66); /* ---- Text ---- */ --text: #F2F5FB; --text-muted: #A6AEC9; --text-faint: #8790AB; --text-invert: #0C1223; --text-link: var(--brand); /* ---- Status ---- */ --success: #3DD68C; --success-tint: #10301F; --warning: #F97316; --warning-tint: #3A1E08; --danger: #F87171; --danger-tint: #2A1614; --info: var(--brand); --info-tint: var(--brand-tint); /* ---- Call states ---- */ --call-connect: var(--grad-success); --call-end: var(--danger); --call-end-fill: var(--danger-tint); --call-mute: var(--text-muted); --call-ringing: var(--brand); /* ---- Bubbles ---- */ --bubble-out: var(--grad-bubble); --bubble-out-text: var(--on-brand-grad); --bubble-in: var(--surface-2); --bubble-in-text: var(--text); --bubble-wa: #10301F; --bubble-wa-text: #7FE0A0; /* ---- Structure ---- */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0,0,0,.44); --shadow-md: 0 4px 12px rgba(0,0,0,.54); --shadow-lg: 0 12px 32px rgba(0,0,0,.62); --shadow-brand: 0 4px 16px rgba(124,130,240,.30); --shadow-brand-lg: 0 10px 30px rgba(124,130,240,.38); --shadow-gold: 0 4px 16px rgba(227,179,79,.24); --ease: cubic-bezier(.2,.8,.2,1); --dur: 160ms; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* ---- Starfield layers ---- Three tiled fields of radial-gradient dots. No JS, no images, no canvas, nothing to animate: a static paint the compositor keeps. The two tile sizes (560 / 390) share no common factor, so the repeat never lines up into a visible grid. Applied by .vega-sky, not by html/body — see that rule. */ --stars-fine: radial-gradient(1.4px at 31% 24.2%, rgba(184,192,255,0.68), transparent), radial-gradient(1.4px at 21.9% 88.6%, rgba(184,192,255,0.4), transparent), radial-gradient(1.8px at 92.1% 49.6%, rgba(184,192,255,0.58), transparent), radial-gradient(1.7px at 78% 45.4%, rgba(226,232,248,0.58), transparent), radial-gradient(1.9px at 45.6% 5.8%, rgba(184,192,255,0.33), transparent), radial-gradient(1.6px at 62% 26%, rgba(199,206,226,0.51), transparent), radial-gradient(1.9px at 62.4% 95.2%, rgba(184,192,255,0.34), transparent), radial-gradient(1.6px at 54.4% 56%, rgba(226,232,248,0.38), transparent), radial-gradient(1.5px at 52.7% 32.8%, rgba(255,255,255,0.52), transparent), radial-gradient(1.7px at 21.4% 52.6%, rgba(184,192,255,0.31), transparent), radial-gradient(1.2px at 91.3% 8.8%, rgba(184,192,255,0.68), transparent), radial-gradient(2px at 49% 76%, rgba(255,255,255,0.61), transparent), radial-gradient(1.5px at 90.4% 75%, rgba(226,232,248,0.34), transparent), radial-gradient(1.8px at 40.7% 67%, rgba(199,206,226,0.43), transparent), radial-gradient(1.9px at 77.9% 96.6%, rgba(255,255,255,0.59), transparent), radial-gradient(1.8px at 62.6% 10.8%, rgba(255,255,255,0.47), transparent), radial-gradient(1.5px at 32.9% 48.8%, rgba(255,255,255,0.59), transparent), radial-gradient(1.8px at 63% 73.8%, rgba(255,255,255,0.63), transparent), radial-gradient(1.9px at 22.6% 71.2%, rgba(226,232,248,0.69), transparent), radial-gradient(1.7px at 17.9% 25.8%, rgba(255,255,255,0.7), transparent), radial-gradient(1.4px at 23.3% 11.4%, rgba(255,255,255,0.58), transparent), radial-gradient(1.9px at 40.1% 9.4%, rgba(255,255,255,0.37), transparent), radial-gradient(1.9px at 81.3% 13.2%, rgba(255,255,255,0.36), transparent), radial-gradient(1.5px at 35.7% 94.6%, rgba(255,255,255,0.4), transparent), radial-gradient(1.8px at 2.9% 63.6%, rgba(184,192,255,0.31), transparent), radial-gradient(1.1px at 7.1% 33.4%, rgba(255,255,255,0.47), transparent); --stars-over: radial-gradient(2.1px at 28.6% 93.8%, rgba(255,255,255,0.61), rgba(255,255,255,0.18) 55%, transparent), radial-gradient(2.6px at 85.4% 80.3%, rgba(184,192,255,0.79), rgba(184,192,255,0.24) 55%, transparent), radial-gradient(2.5px at 3.4% 54%, rgba(184,192,255,0.78), rgba(184,192,255,0.23) 55%, transparent), radial-gradient(2px at 65% 91.8%, rgba(255,255,255,0.8), rgba(255,255,255,0.24) 55%, transparent), radial-gradient(1.9px at 55.8% 7.8%, rgba(255,255,255,0.69), rgba(255,255,255,0.21) 55%, transparent), radial-gradient(2.5px at 84.8% 18.8%, rgba(184,192,255,0.57), rgba(184,192,255,0.17) 55%, transparent), radial-gradient(2.2px at 67.4% 59.8%, rgba(255,255,255,0.6), rgba(255,255,255,0.18) 55%, transparent), radial-gradient(1.9px at 32.6% 31.8%, rgba(255,255,255,0.76), rgba(255,255,255,0.23) 55%, transparent), radial-gradient(2.4px at 8.8% 88.8%, rgba(184,192,255,0.74), rgba(184,192,255,0.22) 55%, transparent), radial-gradient(2.1px at 9.6% 44%, rgba(255,255,255,0.86), rgba(255,255,255,0.26) 55%, transparent), radial-gradient(1.9px at 32.2% 8%, rgba(255,255,255,0.62), rgba(255,255,255,0.19) 55%, transparent), radial-gradient(2.1px at 32% 57.5%, rgba(184,192,255,0.89), rgba(184,192,255,0.27) 55%, transparent), radial-gradient(2.3px at 56.2% 61.3%, rgba(255,255,255,0.66), rgba(255,255,255,0.20) 55%, transparent), radial-gradient(1.8px at 11% 8.5%, rgba(184,192,255,0.69), rgba(184,192,255,0.21) 55%, transparent), radial-gradient(2px at 48.2% 84.5%, rgba(255,255,255,0.55), rgba(255,255,255,0.17) 55%, transparent), radial-gradient(4px at 73% 12%, rgb(255,245,220), rgba(227,179,79,.55) 45%, transparent), radial-gradient(26px at 73% 12%, rgba(227,179,79,.20), transparent 70%), radial-gradient(3.6px at 14% 21%, #fff, rgba(255,255,255,.45) 50%, transparent), radial-gradient(18px at 14% 21%, rgba(255,255,255,.14), transparent 70%), radial-gradient(3.2px at 86% 39%, rgba(255,255,255,.95), rgba(255,255,255,.35) 50%, transparent), radial-gradient(16px at 86% 39%, rgba(184,192,255,.13), transparent 70%), radial-gradient(2.9px at 33% 78%, rgba(184,192,255,.9), rgba(184,192,255,.3) 50%, transparent), radial-gradient(15px at 33% 78%, rgba(124,130,240,.12), transparent 70%), radial-gradient(2.6px at 58% 62%, rgba(255,255,255,.85), transparent 55%); --stars-over-size: 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, 390px 390px, auto, auto, auto, auto, auto, auto, auto, auto, auto; --stars-over-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } /* ============================================================ LIGHT — the opt-in. Same tokens, daylight values. Gold darkens hard here: #E3B34F on white is 1.9:1 and unreadable as text, so light mode uses --gold-deep for anything with a glyph in it and keeps the bright gold for fills only. ============================================================ */ [data-theme="light"] { --brand: var(--peri-700); /* link/icon text: 5.49:1 on --bg */ --brand-deep: var(--peri-800); --brand-deeper: var(--peri-900); --brand-tint: var(--peri-50); --brand-tint-2: var(--peri-100); /* Ink in BOTH themes: this token means "text on a light periwinkle fill" — avatars, unread badges — and those fills are light in light mode too. White here was the bug: 1.50:1 on a peri-200 avatar. */ --brand-contrast: #0B0D1C; --on-brand: #FFFFFF; /* --brand is peri-700 here, so its fill takes white */ --on-status: #FFFFFF; /* status fills are dark in light mode */ --gold: #8A6221; /* text-safe: 5.10:1 on --bg */ --gold-fill: #E3B34F; /* fills stay bright; ink on them is 9.95:1 */ --gold-soft: #E3B34F; /* fills and marks only */ --gold-deep: #6F4F19; --gold-tint: rgba(227, 179, 79, .16); --gold-line: rgba(169, 120, 42, .34); /* Gold fills stay bright in light mode, so their text is ink, not white: white on #A9782A was 3.88:1. Ink on the bright gold is 9.95:1. */ --on-gold: #1A1405; --grad-gold: linear-gradient(135deg, #F0CC85 0%, #E3B34F 55%, #C9963A 100%); --grad-brand: linear-gradient(135deg, var(--peri-600) 0%, var(--peri-800) 100%); --grad-brand-vivid: linear-gradient(135deg, #9AA0FF 0%, #6167E4 55%, #5057CC 100%); --on-brand-grad: #FFFFFF; --grad-brand-soft: linear-gradient(135deg, var(--peri-50) 0%, var(--peri-100) 100%); --grad-bubble: linear-gradient(135deg, var(--peri-600) 0%, var(--peri-800) 100%); --grad-avatar: linear-gradient(140deg, var(--peri-200) 0%, var(--peri-500) 100%); --grad-track: linear-gradient(90deg, var(--peri-400) 0%, var(--peri-600) 100%); --grad-success: linear-gradient(135deg, #34C88A 0%, #16794C 100%); --grad-danger: linear-gradient(135deg, #E86A62 0%, #B3261E 100%); --grad-ambient: radial-gradient(1100px 620px at 12% -8%, rgba(124,130,240,.16), transparent 62%), radial-gradient(900px 520px at 105% 8%, rgba(160,166,250,.14), transparent 60%); --grad-header: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 100%); --bg: #F6F7FC; --surface: #FFFFFF; --surface-2: #EEF0F8; --surface-3: #E3E6F2; --border: #DCDFEE; --border-strong: #C0C5DC; --overlay: rgba(20, 22, 42, .48); --text: #14162A; --text-muted: #565C77; --text-faint: #6B7290; /* 4.74:1 on white */ --text-invert: #FFFFFF; --text-link: var(--brand-deep); --success: #16794C; --success-tint: #E6F4EC; --warning: #B4530A; --warning-tint: #FDF0E2; --danger: #B3261E; --danger-tint: #FBE9E7; --bubble-wa: #E7F7EA; --bubble-wa-text: #0F5132; --shadow-sm: 0 1px 2px rgba(20,22,42,.06), 0 1px 3px rgba(20,22,42,.08); --shadow-md: 0 4px 12px rgba(20,22,42,.10); --shadow-lg: 0 12px 32px rgba(20,22,42,.14); --shadow-brand: 0 4px 14px rgba(97,103,228,.34); --shadow-brand-lg: 0 10px 28px rgba(97,103,228,.40); --shadow-gold: 0 4px 14px rgba(169,120,42,.22); } /* ============================================================ Base ============================================================ */ html { background: var(--bg); color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { margin: 0; min-height: 100vh; background-color: var(--bg); background-image: var(--grad-ambient); background-attachment: fixed; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* ============================================================ Starfield The sky is GLOBAL: one fixed pair of layers on , behind the whole app, painted once and never repainted on scroll. It does not fight the content because of how the app is built — .app-shell and .view-container have no background of their own, and every list row, card and bubble sits on an opaque --surface. So the sky shows in the page ground, the margins, the gutters between cards and the whole of an empty state, and it is covered wherever there is dense text to read. Decoration in the gaps, legibility on the content. Fixed, not absolute: a long thread scrolls over a still sky rather than dragging a 560px tile past the eye, which is the difference between depth and wallpaper. .vega-sky remains for any element that wants its own local sky (a splash panel, a modal backdrop). Do not put it on a full-screen view that already has the body sky underneath — two fields at different offsets read as noise, not as more stars. Light mode drops the field entirely — white sky, no stars. ============================================================ */ /* --- The global sky ---------------------------------------------- */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; } body::before { background-image: var(--stars-fine); background-repeat: repeat; background-size: 560px 560px; opacity: .85; } body::after { background-image: var(--stars-over); background-size: var(--stars-over-size); background-repeat: var(--stars-over-repeat); opacity: .95; } /* The app has to sit ABOVE the sky, or the sky paints over it. */ #root { position: relative; z-index: 1; } [data-theme="light"] body::before, [data-theme="light"] body::after { display: none; } /* --- Local sky, for an element that wants its own ----------------- */ .vega-sky { position: relative; isolation: isolate; } .vega-sky::before, .vega-sky::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* Fine far-field dust, one tile size for every layer. */ .vega-sky::before { background-image: var(--stars-fine); background-repeat: repeat; background-size: 560px 560px; opacity: .85; } /* The brighter mid field plus the placed hero stars. background-size and background-repeat are comma lists that CYCLE when they are shorter than the image list, so a short list hands layers each other's tile size. Both lists are generated at full length for that reason. */ .vega-sky::after { background-image: var(--stars-over); background-size: var(--stars-over-size); background-repeat: var(--stars-over-repeat); opacity: .95; } /* Anything inside needs to sit above the sky. */ .vega-sky > * { position: relative; z-index: 1; } /* A full-bleed sky for auth and splash: fixed so it does not repaint on scroll, and so a short screen still gets the whole field. */ .vega-sky-fixed::before, .vega-sky-fixed::after { position: fixed; } [data-theme="light"] .vega-sky::before, [data-theme="light"] .vega-sky::after { display: none; } /* ============================================================ Gradient utilities ============================================================ */ .g-brand { background-image: var(--grad-brand); color: var(--on-brand-grad); } .g-brand-vivid { background-image: var(--grad-brand-vivid); color: var(--brand-contrast); } .g-soft { background-image: var(--grad-brand-soft); color: var(--brand-deep); } .g-gold { background-image: var(--grad-gold); color: var(--on-gold); } /* Gradient text — headings only, used sparingly. Needs the fallback color first or unsupported browsers render nothing at all. */ .g-text { color: var(--brand-deep); background: var(--grad-brand-vivid); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .g-text-gold { color: var(--gold); background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Gradient border via double background — cheaper and far more reliable across WebKit versions than border-image. */ .g-border { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-brand) border-box; } /* The gold-edged card from the site: a whisper of gold on the line, nothing on the fill. This is gold's main job. */ .card-gold { border: 1px solid var(--gold-line); background: linear-gradient(to bottom right, rgba(227,179,79,.07), rgba(124,130,240,.05)), var(--surface); border-radius: var(--radius-lg); } /* Primary action — periwinkle, always. */ .btn-primary { background-image: var(--grad-brand); color: var(--on-brand-grad); border: 0; border-radius: var(--radius); box-shadow: var(--shadow-brand); font-weight: 600; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn-primary:hover { box-shadow: var(--shadow-brand-lg); } .btn-primary:active { transform: translateY(1px); box-shadow: var(--shadow-brand); } /* The one gold button. Reach for this at most once per screen. */ .btn-gold { background-image: var(--grad-gold); color: var(--on-gold); border: 0; border-radius: var(--radius); box-shadow: var(--shadow-gold); font-weight: 650; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn-gold:active { transform: translateY(1px); } /* Starred / pinned / Command-tier marker */ .mark-gold { color: var(--gold); } .chip-gold { color: var(--gold); background: var(--gold-tint); border: 1px solid var(--gold-line); border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; } /* Progress / goal pace */ .track { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; } .track > i { display: block; height: 100%; background-image: var(--grad-track); border-radius: 4px; } /* Theme swap: animate on toggle only, never on first paint */ .theme-animating, .theme-animating * { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease) !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================ Crash screen — self-contained, no variables. May render before the theme script has run, so it defaults to the dark look now rather than flashing white. ============================================================ */ .vega-crash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: #0C1223; color: #F2F5FB; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .vega-crash button { padding: 12px 28px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #6167E4, #4249A8); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; } html[data-theme="light"] .vega-crash { background: #FFFFFF; color: #14162A; } html[data-theme="light"] .vega-crash button { color: #fff; }