/* UPP shell + components. Everything reads tokens.css — no literal colours here. * A CI check (Phase 8) fails the build on a raw hex outside tokens.css. */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; min-height: 100vh; /* Soft wing-tinted corner glows + the base fill give every page some atmosphere instead of a flat field. Fixed so they don't scroll. */ background-color: var(--bg); background-image: radial-gradient(1100px 560px at 84% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), radial-gradient(820px 500px at 2% 106%, color-mix(in srgb, var(--wing-links) 7%, transparent), transparent 56%); background-attachment: fixed; color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* A whisper of film grain over the glows — texture without noise. Sits above the page fill but below all content (z-index:-1). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 170px 170px; } /* ---- Time-of-day ambient backdrop (data-daypart on , set in base.html) Cozy, low-attention temporal wash: warm at dawn/dusk, cool by day, deep at night, with a soft sun/moon glow that drifts corner + hue with the hour. The rgba() literals are intentional ambient tints, not panel tokens. */ .daysky { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--daysky-mul, 1); transition: background 1.6s ease, opacity 1.6s ease; background: radial-gradient(135% 105% at 12% 116%, var(--sky-a, transparent), transparent 60%), radial-gradient(115% 95% at 90% -14%, var(--sky-b, transparent), transparent 56%); } html[data-bg-intensity="subtle"] { --daysky-mul: .5; } html[data-bg-intensity="vivid"] { --daysky-mul: 1.7; } html[data-bg="off"] .daysky { display: none; } .daysky::after { content: ""; position: absolute; width: min(48vw, 540px); aspect-ratio: 1; left: var(--orb-x, 82%); top: var(--orb-y, 14%); translate: -50% -50%; border-radius: 50%; opacity: .55; background: radial-gradient(circle, var(--orb, transparent) 0%, transparent 66%); transition: left 1.6s ease, top 1.6s ease, background 1.6s ease; } :root[data-daypart="dawn"] { --sky-a: rgba(255,170,128,.17); --sky-b: rgba(255,122,150,.12); --orb: rgba(255,178,120,.22); --orb-x: 76%; --orb-y: 26%; } :root[data-daypart="day"] { --sky-a: rgba(120,178,255,.10); --sky-b: rgba(150,205,255,.08); --orb: rgba(255,241,205,.16); --orb-x: 84%; --orb-y: 12%; } :root[data-daypart="dusk"] { --sky-a: rgba(255,146,88,.17); --sky-b: rgba(150,110,224,.15); --orb: rgba(255,150,108,.22); --orb-x: 20%; --orb-y: 22%; } :root[data-daypart="night"] { --sky-a: rgba(96,116,208,.15); --sky-b: rgba(70,92,172,.12); --orb: rgba(184,202,255,.15); --orb-x: 80%; --orb-y: 15%; } @media (prefers-reduced-motion: reduce) { .daysky, .daysky::after { transition: none; } } /* ---- Surface tint (data-surface): a constant warm/cool cast over the app, distinct from the time-tracking daysky. Very low alpha — a cast, not a fog. */ .skin-tint { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s ease, background .8s ease; } html[data-surface="warm"] .skin-tint { opacity: 1; background: radial-gradient(150% 130% at 50% -20%, rgba(255,176,110,.06), transparent 72%), linear-gradient(rgba(255,168,104,.045), rgba(255,146,86,.05)); } html[data-surface="cool"] .skin-tint { opacity: 1; background: radial-gradient(150% 130% at 50% -20%, rgba(120,176,255,.055), transparent 72%), linear-gradient(rgba(122,168,255,.045), rgba(92,140,232,.05)); } /* ---- Secondary colour (--accent2): defaults to the primary accent, overridden by the injected skin when the operator sets one. Used for secondary accents. */ :root { --accent2: var(--accent); --accent2-hover: var(--accent-hover); --accent2-weak: var(--accent-weak); } .btn-ghost:hover { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 45%, var(--border)); } .bell-count { background: var(--accent2); } /* ---- Contrast (data-contrast=high): push secondary text further from the ground. References --text and --bg only (no self-reference). */ html[data-contrast="high"] { --text-dim: color-mix(in srgb, var(--text) 82%, var(--bg)); --text-faint: color-mix(in srgb, var(--text) 62%, var(--bg)); } /* ---- Density (data-density=compact): tighten the busiest components. */ html[data-density="compact"] .card-pad { padding: var(--sp-4); } html[data-density="compact"] .btn { min-height: 32px; } html[data-density="compact"] .btn-sm { min-height: 26px; } html[data-density="compact"] .wingtab { padding-top: .45rem; padding-bottom: .45rem; } html[data-density="compact"] .hub__grid { gap: 12px; } html[data-density="compact"] .hub-card { min-height: 130px; padding: 18px 20px 16px; } /* ---- Custom dropdown (shared/js/dropdown.js enhances a wrapped