/* ============================================================= tunein.fun · Design Tokens (Simplified · v1 · 2026-05) ---------------------------------------------------------------- Drop this into your codebase as a CSS variable bundle, OR convert to JS/TS / Tailwind config / iOS UIColor / Android colors.xml. Token NAMES are stable; if you fork, keep the names. The "Simplified" system removes all decorative color from the original mid-fi mocks: · ONE signature pink (#fa2d48) — CTAs + accents only · Platform colors — ONLY when identifying a source · Everything else is neutral grayscale ============================================================= */ :root { /* ---------- Surfaces (dark, default) ---------- */ --bg: #0a0a0b; --bg-2: #111113; --surface: #1a1a1c; --surface-2: #242427; --hairline: rgba(255, 255, 255, 0.08); --hairline-strong: rgba(255, 255, 255, 0.14); /* ---------- Text (4 steps) ---------- */ --text: #ffffff; --text-2: rgba(255, 255, 255, 0.74); --text-3: rgba(255, 255, 255, 0.50); --text-4: rgba(255, 255, 255, 0.30); /* ---------- Signature pink (the ONE accent) ---------- */ --pink: #fa2d48; --rose: #fa2d48; /* alias — used on links / kickers / active tab */ /* ---------- The ONE gradient ---------- */ --gradient-warm: linear-gradient(160deg, #ff5470 0%, #c4133a 100%); /* ---------- Platform accents (source ID only) ---------- */ --p-netease: #c20c0c; /* 网易云音乐 */ --p-qq: #1ec562; /* QQ 音乐 */ --p-apple: #fa2d48; /* Apple Music (overlaps brand pink intentionally) */ /* ---------- Status ---------- */ --status-online: #46e08a; /* "X 人正在收听" green dot + 8px glow */ --status-warn: #ffb86b; /* "未检测到 App" */ /* Errors use neutral gray (var(--surface) + dashed hairline) — NOT red. */ /* ---------- Type ---------- */ --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Noto Sans SC', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', monospace; /* ---------- Radius ---------- */ --r-lg: 22px; /* sheets, hero cards */ --r-md: 14px; /* form fields, detail cards */ --r-sm: 10px; /* cover thumbs */ /* Buttons / pills: 999px */ /* ---------- Shadows ---------- */ --shadow-hero: 0 20px 50px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06); --shadow-card: 0 14px 40px -8px rgba(0,0,0,0.5); --shadow-cta: 0 6px 18px -8px rgba(250,45,72,0.45); --shadow-toast: 0 12px 32px -8px rgba(0,0,0,0.6); /* ---------- Spacing rhythm (informational) ---------- */ --screen-pad-x: 16px; --section-gap: 24px; --status-h: 50px; --tabbar-h: 76px; } /* ============================================================= Light mode — toggle by adding `.light` (or [data-theme="light"]) on or the app root. ============================================================= */ .light { --bg: #ffffff; --bg-2: #faf7ef; --surface: #ffffff; --surface-2: #ececee; --hairline: rgba(0, 0, 0, 0.08); --hairline-strong: rgba(0, 0, 0, 0.14); --text: #1d1d1f; --text-2: rgba(0, 0, 0, 0.72); --text-3: rgba(0, 0, 0, 0.52); --text-4: rgba(0, 0, 0, 0.32); --rose: #e83352; /* slightly darker for AA contrast on cream */ /* Page-level background uses a soft two-stop radial wash on cream */ background: radial-gradient(ellipse at 15% 0%, rgba(250,45,72,0.12) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(91,57,255,0.09) 0%, transparent 55%), #fbf6ec; }