/* Theme tokens — default is dark (night); set data-theme="light" on for day mode */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #000000; --bg-elevated: #0a0a0a; --bg-muted: #000000; --card: #000000; --text: #eeeeee; --text-muted: rgba(238, 238, 238, 0.55); --text-faint: rgba(238, 238, 238, 0.42); --text-subtle: rgba(238, 238, 238, 0.4); --border: rgba(238, 238, 238, 0.22); --border-strong: rgba(238, 238, 238, 0.35); --border-hover: rgba(238, 238, 238, 0.55); --border-focus: rgba(238, 238, 238, 0.65); --surface-hover: rgba(238, 238, 238, 0.04); --surface-hover-strong: rgba(238, 238, 238, 0.06); --accent: #eeeeee; --accent-fg: #000000; --accent-hover: #ffffff; --scrim: rgba(0, 0, 0, 0.88); --overlay: rgba(0, 0, 0, 0.72); --overlay-fg: #eeeeee; --shadow: rgba(0, 0, 0, 0.6); --highlight-ring: #eeeeee; --media-bg: #000000; --hero-scrim: rgba(0, 0, 0, 0.32); --hero-scrim-end: rgba(0, 0, 0, 0.68); --hero-scrim-gradient: linear-gradient( 180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.36) 35%, rgba(0, 0, 0, 0.52) 65%, rgba(0, 0, 0, 0.68) 100% ); --hero-fg: #eeeeee; --hero-fg-muted: rgba(238, 238, 238, 0.55); --hero-label: rgba(238, 238, 238, 0.45); --landing-label: rgba(238, 238, 238, 0.45); --landing-muted: rgba(238, 238, 238, 0.55); --landing-faint: rgba(238, 238, 238, 0.45); --landing-form-label: rgba(238, 238, 238, 0.55); --landing-form-placeholder: rgba(238, 238, 238, 0.35); --waveform-played: #eeeeee; --waveform-unplayed: rgba(238, 238, 238, 0.28); --avatar-placeholder-bg: #111111; --radius: 0; --page-pad: 48px; --font: "Syne", system-ui, sans-serif; } [data-theme="light"] { color-scheme: light; --bg: #f4f4f1; --bg-elevated: #ffffff; --bg-muted: #ebebe8; --card: #ffffff; --text: #121212; --text-muted: rgba(18, 18, 18, 0.55); --text-faint: rgba(18, 18, 18, 0.42); --text-subtle: rgba(18, 18, 18, 0.4); --border: rgba(18, 18, 18, 0.14); --border-strong: rgba(18, 18, 18, 0.22); --border-hover: rgba(18, 18, 18, 0.38); --border-focus: rgba(18, 18, 18, 0.5); --surface-hover: rgba(18, 18, 18, 0.04); --surface-hover-strong: rgba(18, 18, 18, 0.07); --accent: #121212; --accent-fg: #f4f4f1; --accent-hover: #000000; --scrim: rgba(244, 244, 241, 0.94); --overlay: rgba(0, 0, 0, 0.55); --overlay-fg: #f4f4f1; --shadow: rgba(18, 18, 18, 0.14); --highlight-ring: #121212; --media-bg: #000000; --hero-scrim: transparent; --hero-scrim-end: #f4f4f1; --hero-scrim-gradient: linear-gradient( 180deg, rgba(244, 244, 241, 0.12) 0%, rgba(244, 244, 241, 0.35) 38%, rgba(244, 244, 241, 0.72) 72%, #f4f4f1 100% ); --hero-fg: #121212; --hero-fg-muted: rgba(18, 18, 18, 0.55); --hero-label: rgba(18, 18, 18, 0.5); --landing-label: rgba(18, 18, 18, 0.5); --landing-muted: rgba(18, 18, 18, 0.55); --landing-faint: rgba(18, 18, 18, 0.45); --landing-form-label: rgba(18, 18, 18, 0.55); --landing-form-placeholder: rgba(18, 18, 18, 0.35); --waveform-played: #121212; --waveform-unplayed: rgba(18, 18, 18, 0.22); --avatar-placeholder-bg: #ffffff; }