/* notaplayer.net — design tokens * * Ported verbatim from the iOS app's brand files: * apps/fcc-music/Sources/Views/Shared/{MusicBrand,PodsBrand,StationsBrand}.swift * * The Swift shape is: dark = the "black" preset with bg/card/line overridden * per surface; light = the bare "paper" preset, identical across all three * surfaces except the accent. Reproduced exactly below — do not "tidy" the * light block into per-surface overrides, there aren't any. */ :root { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Radii — iOS values, unchanged */ --r-hero: 20px; --r-deck: 16px; --r-bar: 14px; --r-art: 12px; --r-card: 10px; --r-pod: 8px; --r-mini: 6px; --r-bar-sm: 4px; --rail-w: 248px; --content-max: 1180px; --player-h: 76px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ── Theme: shared text tokens ─────────────────────────────────────── */ html, html[data-theme="dark"] { --text: #e5e5e5; --dim: #9aa3b2; --on-accent: #08070c; /* iOS puts a BLACK glyph on filled accent */ --scrim: 0, 0, 0; --shadow-strong: rgba(0, 0, 0, 0.4); --shadow-soft: rgba(0, 0, 0, 0.35); --glass: rgba(20, 18, 26, 0.72); color-scheme: dark; } /* First-paint fallback. index.html ships data-theme="dark" so the tokens * always resolve, but a light-preference visitor would then get a dark flash * before boot.js runs. These rules apply the light palette when the system * asks for it AND the user has not chosen a theme — theme.js stamps * data-theme on at boot, and the [data-theme] rules below outrank * these, so an explicit choice always wins. */ @media (prefers-color-scheme: light) { /* Applies only while the visitor has made no explicit choice. theme.js * stamps data-theme on at boot; once it does, the [data-theme] * rules take over and win on specificity. */ html:not([data-theme]) { --text: #15171a; --dim: #6b6f76; --bg: #ffffff; --card: #f7f7f7; --line: #d8d8d8; --on-accent: #ffffff; --shadow-strong: rgba(15, 23, 42, 0.18); --shadow-soft: rgba(15, 23, 42, 0.12); --glass: rgba(255, 255, 255, 0.78); --accent-music: #8b3fe0; --accent-pods: #5840d8; --accent-stations: #4f46e5; color-scheme: light; } html:not([data-theme])[data-surface="music"] { --accent: #8b3fe0; } html:not([data-theme])[data-surface="pods"] { --accent: #5840d8; } html:not([data-theme])[data-surface="stations"] { --accent: #4f46e5; } } html[data-theme="light"] { --text: #15171a; --dim: #6b6f76; --bg: #ffffff; --card: #f7f7f7; --line: #d8d8d8; /* Light accents are dark violets — a black glyph would be unreadable. */ --on-accent: #ffffff; --scrim: 0, 0, 0; --shadow-strong: rgba(15, 23, 42, 0.18); --shadow-soft: rgba(15, 23, 42, 0.12); --glass: rgba(255, 255, 255, 0.78); color-scheme: light; } /* ── Surface accents + dark bg/card/line overrides ─────────────────── */ html[data-surface="music"]:not([data-theme="light"]) { --accent: #c084fc; --bg: #08070c; --card: #131118; --line: #2a2733; } html[data-surface="music"][data-theme="light"] { --accent: #8b3fe0; } html[data-surface="pods"]:not([data-theme="light"]) { --accent: #a08bf7; --bg: #0b0910; --card: #16121c; --line: #2c2836; } html[data-surface="pods"][data-theme="light"] { --accent: #5840d8; } html[data-surface="stations"]:not([data-theme="light"]) { --accent: #c7d2fe; --bg: #090b10; --card: #121620; --line: #293040; } html[data-surface="stations"][data-theme="light"] { --accent: #4f46e5; } /* Per-content accents for the player, which follows the PLAYING content * rather than the visible surface (MiniPlayerBar.swift). A podcast opened * from the music surface still renders in the pods violet. */ html, html[data-theme="dark"] { --accent-music: #c084fc; --accent-pods: #a08bf7; --accent-stations: #c7d2fe; } html[data-theme="light"] { --accent-music: #8b3fe0; --accent-pods: #5840d8; --accent-stations: #4f46e5; }