:root { color-scheme: light; /* V3 neutral scale: the only gray source for refreshed surfaces and type. */ --g-bg: #f6f6f9; --g-surface: #ffffff; --g-fill: #f1f1f6; --g-line-1: #ececf2; --g-line-2: #dcdde8; --ink-1: #26232e; --ink-2: #55515e; --ink-3: #8b8794; --ink-4: #b6b3bf; /* V3 elevation, geometry, spacing and type scales. */ --shadow-rest: 0 1px 2px rgba(23, 20, 32, 0.04); --shadow-raise: 0 4px 16px -4px rgba(23, 20, 32, 0.12); --radius-input: 6px; --radius-button: 10px; --radius-panel: 14px; --radius-pill: 999px; --gap-1: 8px; --gap-2: 12px; --gap-3: 16px; --gap-4: 24px; --card-padding: 20px; --type-t1-size: 20px; --type-t2-size: 15px; --type-t3-size: 13.5px; --type-t4-size: 12.5px; --type-t5-size: 11px; --type-d1-size: 22px; --type-weight-regular: 400; --type-weight-medium: 500; --type-weight-strong: 650; --line-title: 1.35; --line-body: 1.6; --line-data: 1.2; --type-heading-line-height: var(--line-title); --type-body-line-height: var(--line-body); --type-display-line-height: var(--line-data); --type-label-letter-spacing: .04em; /* Legacy names remain available, but resolve onto the V3 foundation. */ --app-background: var(--g-bg); --surface: var(--g-surface); --surface-2: var(--g-fill); --primary: #14b8c8; --primary-hover: #0ea5b5; --primary-soft: rgba(20, 184, 200, 0.12); --secondary: #9155fd; --info: #16b1ff; --success: #56ca00; --warning: #ffb400; --danger: #ff4c51; --text-primary: var(--ink-1); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); --text-disabled: var(--ink-4); --border-color: var(--g-line-1); --border-strong: var(--g-line-2); --radius-small: var(--radius-input); --radius-medium: var(--radius-button); --radius-large: var(--radius-panel); --space-1: var(--gap-1); --space-2: var(--gap-1); --space-3: var(--gap-2); --space-4: var(--gap-3); --space-5: 20px; --space-6: var(--gap-4); --space-8: var(--gap-4); --shadow-card: var(--shadow-rest); --shadow-lift: var(--shadow-raise); --radius-card: var(--radius-panel); --radius-control: var(--radius-input); --motion-fast: 160ms; --motion-base: 240ms; --motion-slow: 320ms; --motion-press: 120ms; --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --press-scale: 0.97; --press-brightness: .96; --hover-lift: -2px; --button-hover-lift: -1px; --view-enter-offset: 4px; --modal-enter-offset: 12px; --modal-enter-scale: .98; --modal-backdrop-opacity: .54; --shadow-button-hover: 0 2px 8px rgba(20, 184, 200, .28); --interactive-hover-bg: rgba(20, 184, 200, .05); --transition-fast: var(--motion-fast) var(--motion-ease); --transition-base: var(--motion-base) var(--motion-ease); --transition-slow: var(--motion-slow) var(--motion-ease); --motion-duration: var(--motion-fast); --transition: var(--transition-fast); --focus-ring: 0 0 0 3px rgba(20, 184, 200, 0.25); --teal-soft: rgba(20, 184, 200, 0.12); --violet-soft: rgba(145, 85, 253, 0.12); --success-soft: rgba(86, 202, 0, 0.13); --warning-soft: rgba(255, 180, 0, 0.15); --danger-soft: rgba(255, 76, 81, 0.11); --info-soft: rgba(22, 177, 255, 0.12); --header-bg: rgba(255, 255, 255, 0.98); --app-font: Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* Dark theme. Manual only — the toggle in the header stamps data-theme on and the choice lives in sessionStorage, so it survives navigation but not the browser closing. No prefers-color-scheme: the operator asked for the switch to be the only thing that decides. Only the neutral scale flips. Every legacy name above derives from it through var(), so surfaces, type and borders follow on their own. The accents stay put: #14b8c8 already reads at 7.4:1 on this ground, and it doubles as the fill under white button text, where brightening it would hurt. The soft tints do need more alpha to stay visible once the ground goes dark. */ :root[data-theme="dark"] { /* Tells the browser itself we are dark, so the chrome it draws — scrollbars, select popups, date controls — stops rendering light. */ color-scheme: dark; /* Neutral cool black, MoviePilot-aligned. The earlier values carried the same blue-violet bias the light scale uses, which reads as a muddy film on a dark ground; here the hue is dropped to a cool grey so the black stays clean. */ --g-bg: #0f1216; --g-surface: #171b21; --g-fill: #212630; --g-line-1: #2a303a; --g-line-2: #3a414d; --ink-1: #f2f4f7; --ink-2: #b3bac5; --ink-3: #7e8794; --ink-4: #565e6b; --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.34); --shadow-raise: 0 4px 16px -4px rgba(0, 0, 0, 0.55); --primary-soft: rgba(20, 184, 200, 0.18); --teal-soft: rgba(20, 184, 200, 0.18); --violet-soft: rgba(145, 85, 253, 0.24); --success-soft: rgba(86, 202, 0, 0.2); --warning-soft: rgba(255, 180, 0, 0.22); --danger-soft: rgba(255, 76, 81, 0.2); --info-soft: rgba(22, 177, 255, 0.2); --interactive-hover-bg: rgba(20, 184, 200, 0.1); --header-bg: rgba(23, 27, 33, 0.96); } html { overflow-y: scroll; scrollbar-gutter: stable; } @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: var(--motion-fast); } ::view-transition-new(root) { animation-duration: var(--motion-base); } @keyframes ui-view-enter { from { opacity: 0; transform: translateY(var(--view-enter-offset)); } to { opacity: 1; transform: translateY(0); } } @keyframes ui-modal-dialog-enter { from { opacity: 0; transform: translateY(var(--modal-enter-offset)) scale(var(--modal-enter-scale)); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ui-modal-backdrop-enter { from { opacity: 0; } to { opacity: var(--modal-backdrop-opacity); } } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-press: 0ms; } }