/* ========================================================================= Spotiny · Design tokens ---------------------------------------------------------------------------- All colors, spacing, typography, radii, shadows, easing live here. Override `--accent` etc. on for accent theming. Override the entire surface palette on for light mode. v2 — Dark premium music-app aesthetic. Spotiny Green is the new default accent. ========================================================================= */ :root { /* Default = dark theme (Spotiny Green accent) */ color-scheme: dark; /* Surfaces — near-black with subtle elevation steps */ --bg: #0d0d0d; --bg-elevated: #141414; --surface: #1a1a1a; --surface-2: #222222; --surface-3: #2c2c2c; --surface-hover: #333333; --glass: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.10); /* Text — pure white primary, light grey secondary, deep grey muted */ --text: #FFFFFF; --text-2: #B3B3B3; --muted: #6A6A6A; --muted-2:#404040; /* Borders */ --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.15); /* Accent (Spotiny Green default — override on [data-accent]) */ --accent: #1ED760; --accent-strong: #17B650; --accent-glow: rgba(30,215,96,0.30); --accent-soft: rgba(30,215,96,0.12); --accent-softer: rgba(30,215,96,0.06); --accent-grad: linear-gradient(135deg, #1ED760 0%, #17B650 60%, #0F7A33 100%); /* Status */ --danger: #ef4444; --success: #22c55e; --warning: #f59e0b; --info: #38bdf8; /* Shadows */ --shadow: 0 8px 24px rgba(0,0,0,0.5); --shadow-lg: 0 20px 56px rgba(0,0,0,0.65); --shadow-card: 0 4px 20px rgba(0,0,0,0.4); --shadow-accent: 0 10px 30px var(--accent-glow); /* Radii */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* Spacing scale */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; /* Typography */ --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-32:32px; --fs-40:40px; --font-sans: 'Circular Std', 'Inter', 'Noto Sans', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Hebrew', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ---- Fixed-size constants (every container that renders an image uses these so layout never breaks regardless of image dimensions) ---- */ --card-w: 160px; /* album/playlist card width */ --card-h: 160px; /* album/playlist card image height */ --artist-card-w: 140px; /* circular artist card width */ --artist-card-h: 140px; /* circular artist card height */ --genre-tile-w: 160px; /* genre tile width */ --genre-tile-h: 100px; /* genre tile height */ --track-thumb-w: 48px; /* track row thumbnail */ --track-thumb-h: 48px; --hero-h: 280px; /* artist/album/playlist hero image height */ --now-playing-cover: min(75vw, 320px); /* square now-playing cover */ --mini-h: 72px; /* mini player bar height */ --topbar-h: 56px; /* top bar height */ --bottom-nav-h: 64px; /* bottom navigation height */ --app-max-w: 430px; /* max content width (phone column) */ /* Layout (legacy aliases kept for backward compat with existing CSS) */ --mini-h-legacy: var(--mini-h); --topbar-h-legacy: var(--topbar-h); /* Motion */ --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-spring: cubic-bezier(0.34,1.56,0.64,1); --dur-1: 100ms; --dur-2: 200ms; --dur-3: 340ms; /* Dynamic accent (set by theme.js from album-art palette extraction) */ --dyn-accent: var(--accent); --dyn-accent-strong: var(--accent-strong); --dyn-accent-glow: var(--accent-glow); --dyn-accent-soft: var(--accent-soft); --dyn-accent-grad: var(--accent-grad); } /* ---- Light theme (set ) ---- */ [data-theme="light"] { color-scheme: light; --bg: #f7f7fa; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f1f1f5; --surface-3: #e7e7ec; --surface-hover: #dcdce2; --glass: rgba(0,0,0,0.04); --glass-strong: rgba(0,0,0,0.08); --text: #14141a; --text-2: #3d3d4a; --muted: #6c6c78; --muted-2:#a0a0ac; --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.16); --shadow: 0 8px 24px rgba(0,0,0,0.10); --shadow-lg: 0 20px 56px rgba(0,0,0,0.16); --shadow-card: 0 4px 20px rgba(0,0,0,0.08); } /* ---- "Black" theme (OLED pure black) ---- */ [data-theme="black"] { --bg: #000000; --bg-elevated: #050505; --surface: #0a0a0a; --surface-2: #121212; --surface-3: #1c1c1c; --surface-hover: #252525; } /* ---- "Midnight" theme (deep blue-black) ---- */ [data-theme="midnight"] { --bg: #0a0e1a; --bg-elevated: #11172a; --surface: #131a30; --surface-2: #1a2240; --surface-3: #232c52; --surface-hover: #2c366a; --border: rgba(120,150,255,0.10); --border-strong: rgba(120,150,255,0.20); } /* ---- "Sunset" theme (warm dark) ---- */ [data-theme="sunset"] { --bg: #1a0d10; --bg-elevated: #261318; --surface: #2e1820; --surface-2: #3d1f2a; --surface-3: #4d2836; --surface-hover: #5d3144; --text: #fde4e4; --text-2: #f0c5c5; --muted: #c99; --border: rgba(255,180,180,0.08); --border-strong: rgba(255,180,180,0.16); } /* ---- Accent themes (override on [data-accent]) ---- Spotiny Green is the new default. All other accents are kept as alternatives so users can switch via Settings → Accent picker. */ [data-accent="spotiny-green"] { --accent: #1ED760; --accent-strong: #17B650; --accent-glow: rgba(30,215,96,0.30); --accent-soft: rgba(30,215,96,0.12); --accent-softer: rgba(30,215,96,0.06); --accent-grad: linear-gradient(135deg, #1ED760 0%, #17B650 60%, #0F7A33 100%); } [data-accent="crimson"] { --accent: #ef4444; --accent-strong: #dc2626; --accent-glow: rgba(239,68,68,0.32); --accent-soft: rgba(239,68,68,0.12); --accent-softer: rgba(239,68,68,0.06); --accent-grad: linear-gradient(135deg,#ff5a5a 0%,#dc2626 55%,#991b1b 100%); } [data-accent="ocean"] { --accent: #38bdf8; --accent-strong: #0ea5e9; --accent-glow: rgba(56,189,248,0.32); --accent-soft: rgba(56,189,248,0.12); --accent-softer: rgba(56,189,248,0.06); --accent-grad: linear-gradient(135deg,#7dd3fc 0%,#0ea5e9 55%,#0369a1 100%); } [data-accent="violet"] { --accent: #8b5cf6; --accent-strong: #7c3aed; --accent-glow: rgba(139,92,246,0.32); --accent-soft: rgba(139,92,246,0.12); --accent-softer: rgba(139,92,246,0.06); --accent-grad: linear-gradient(135deg,#c4b5fd 0%,#7c3aed 55%,#5b21b6 100%); } [data-accent="emerald"] { --accent: #10b981; --accent-strong: #059669; --accent-glow: rgba(16,185,129,0.32); --accent-soft: rgba(16,185,129,0.12); --accent-softer: rgba(16,185,129,0.06); --accent-grad: linear-gradient(135deg,#6ee7b7 0%,#059669 55%,#064e3b 100%); } [data-accent="amber"] { --accent: #f59e0b; --accent-strong: #d97706; --accent-glow: rgba(245,158,11,0.32); --accent-soft: rgba(245,158,11,0.12); --accent-softer: rgba(245,158,11,0.06); --accent-grad: linear-gradient(135deg,#fcd34d 0%,#d97706 55%,#92400e 100%); } [data-accent="pink"] { --accent: #ec4899; --accent-strong: #db2777; --accent-glow: rgba(236,72,153,0.32); --accent-soft: rgba(236,72,153,0.12); --accent-softer: rgba(236,72,153,0.06); --accent-grad: linear-gradient(135deg,#f9a8d4 0%,#db2777 55%,#9d174d 100%); } [data-accent="lime"] { --accent: #84cc16; --accent-strong: #65a30d; --accent-glow: rgba(132,204,22,0.32); --accent-soft: rgba(132,204,22,0.12); --accent-softer: rgba(132,204,22,0.06); --accent-grad: linear-gradient(135deg,#bef264 0%,#65a30d 55%,#3f6212 100%); } /* ---- Dynamic-accent mode (when [data-dynamic="on"]) ---- theme.js sets --dyn-accent* vars at runtime from album-art palette. Elements that opt into dynamic accent use --dyn-accent* instead of --accent*. */ [data-dynamic="on"] { --accent: var(--dyn-accent); --accent-strong: var(--dyn-accent-strong); --accent-glow: var(--dyn-accent-glow); --accent-soft: var(--dyn-accent-soft); --accent-grad: var(--dyn-accent-grad); } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }