/* PlayBreak — color schemes only (layout stays the same). Switch theme on : default, violet, coral, teal, ocean, rose, sunset, forest, berry, slate */ :root, [data-theme="default"] { --brand: #009cff; --brand-dark: #0088e0; --brand-accent: #009cff; --bg-top: #bfeaff; --bg-mid: #a8dcff; --bg-bottom: #7ec8f7; --text: #002b50; --text-muted: rgba(0, 43, 80, 0.75); --tile-ring: rgba(0, 156, 255, 0.42); --btn-hover-bg: #f0f6fb; --btn-active-bg: #e8f4fc; --shadow-soft: rgba(0, 60, 120, 0.1); --shadow-strong: rgba(0, 60, 120, 0.18); --theme-color: #009cff; --pill-bg: #ffffff; --pill-shadow: 0 2px 8px rgba(0, 80, 140, 0.12); --surface-text: #1a1a1a; --surface-muted: #6b7c8a; --surface-border: transparent; --surface-control-bg: #f0f6fb; --pill-blur: 0; } [data-theme="violet"] { --brand: #7b61ff; --brand-dark: #5b41e0; --brand-accent: #ff6b4a; --bg-top: #f3f0ff; --bg-mid: #faf5ff; --bg-bottom: #ebe4ff; --text: #2d2450; --text-muted: rgba(45, 36, 80, 0.72); --tile-ring: rgba(123, 97, 255, 0.38); --btn-hover-bg: #f0ecff; --btn-active-bg: #e8e0ff; --shadow-soft: rgba(46, 30, 90, 0.1); --shadow-strong: rgba(46, 30, 90, 0.16); --theme-color: #7b61ff; } [data-theme="coral"] { --brand: #ff6b4a; --brand-dark: #e85535; --brand-accent: #3b82f6; --bg-top: #fff4ef; --bg-mid: #ffe8dc; --bg-bottom: #ffd4c4; --text: #3d1f14; --text-muted: rgba(61, 31, 20, 0.72); --tile-ring: rgba(255, 107, 74, 0.38); --btn-hover-bg: #fff0ea; --btn-active-bg: #ffe4d9; --shadow-soft: rgba(120, 40, 20, 0.1); --shadow-strong: rgba(120, 40, 20, 0.16); --theme-color: #ff6b4a; } [data-theme="teal"] { --brand: #0d9488; --brand-dark: #0f766e; --brand-accent: #f59e0b; --bg-top: #ecfdf5; --bg-mid: #d1faf0; --bg-bottom: #99f6e4; --text: #134e4a; --text-muted: rgba(19, 78, 74, 0.72); --tile-ring: rgba(13, 148, 136, 0.38); --btn-hover-bg: #e6faf5; --btn-active-bg: #ccfbf1; --shadow-soft: rgba(15, 80, 70, 0.1); --shadow-strong: rgba(15, 80, 70, 0.16); --theme-color: #0d9488; } [data-theme="ocean"] { --brand: #2563eb; --brand-dark: #1d4ed8; --brand-accent: #38bdf8; --bg-top: #eff6ff; --bg-mid: #dbeafe; --bg-bottom: #bfdbfe; --text: #1e3a5f; --text-muted: rgba(30, 58, 95, 0.72); --tile-ring: rgba(37, 99, 235, 0.35); --btn-hover-bg: #eff6ff; --btn-active-bg: #dbeafe; --shadow-soft: rgba(30, 58, 95, 0.1); --shadow-strong: rgba(30, 58, 95, 0.16); --theme-color: #2563eb; } [data-theme="rose"] { --brand: #e11d48; --brand-dark: #be123c; --brand-accent: #a855f7; --bg-top: #fff1f2; --bg-mid: #ffe4e6; --bg-bottom: #fecdd3; --text: #4c0519; --text-muted: rgba(76, 5, 25, 0.72); --tile-ring: rgba(225, 29, 72, 0.35); --btn-hover-bg: #fff1f2; --btn-active-bg: #ffe4e6; --shadow-soft: rgba(76, 5, 25, 0.08); --shadow-strong: rgba(76, 5, 25, 0.14); --theme-color: #e11d48; } [data-theme="sunset"] { --brand: #ea580c; --brand-dark: #c2410c; --brand-accent: #db2777; --bg-top: #fff7ed; --bg-mid: #ffedd5; --bg-bottom: #fed7aa; --text: #431407; --text-muted: rgba(67, 20, 7, 0.72); --tile-ring: rgba(234, 88, 12, 0.35); --btn-hover-bg: #fff7ed; --btn-active-bg: #ffedd5; --shadow-soft: rgba(67, 20, 7, 0.1); --shadow-strong: rgba(67, 20, 7, 0.16); --theme-color: #ea580c; } [data-theme="forest"] { --brand: #16a34a; --brand-dark: #15803d; --brand-accent: #ca8a04; --bg-top: #f0fdf4; --bg-mid: #dcfce7; --bg-bottom: #bbf7d0; --text: #14532d; --text-muted: rgba(20, 83, 45, 0.72); --tile-ring: rgba(22, 163, 74, 0.35); --btn-hover-bg: #f0fdf4; --btn-active-bg: #dcfce7; --shadow-soft: rgba(20, 83, 45, 0.1); --shadow-strong: rgba(20, 83, 45, 0.16); --theme-color: #16a34a; } [data-theme="berry"] { --brand: #9333ea; --brand-dark: #7e22ce; --brand-accent: #06b6d4; --bg-top: #faf5ff; --bg-mid: #f3e8ff; --bg-bottom: #e9d5ff; --text: #3b0764; --text-muted: rgba(59, 7, 100, 0.72); --tile-ring: rgba(147, 51, 234, 0.35); --btn-hover-bg: #faf5ff; --btn-active-bg: #f3e8ff; --shadow-soft: rgba(59, 7, 100, 0.1); --shadow-strong: rgba(59, 7, 100, 0.16); --theme-color: #9333ea; } [data-theme="slate"] { --brand: #475569; --brand-dark: #334155; --brand-accent: #6366f1; --bg-top: #f8fafc; --bg-mid: #f1f5f9; --bg-bottom: #e2e8f0; --text: #0f172a; --text-muted: rgba(15, 23, 42, 0.68); --tile-ring: rgba(71, 85, 105, 0.3); --btn-hover-bg: #f1f5f9; --btn-active-bg: #e2e8f0; --shadow-soft: rgba(15, 23, 42, 0.08); --shadow-strong: rgba(15, 23, 42, 0.14); --theme-color: #475569; } [data-theme="lime"] { --brand: #65a30d; --brand-dark: #4d7c0f; --brand-accent: #f97316; --bg-top: #f7fee7; --bg-mid: #ecfccb; --bg-bottom: #d9f99d; --text: #365314; --text-muted: rgba(54, 83, 20, 0.72); --tile-ring: rgba(101, 163, 13, 0.35); --btn-hover-bg: #f7fee7; --btn-active-bg: #ecfccb; --shadow-soft: rgba(54, 83, 20, 0.1); --shadow-strong: rgba(54, 83, 20, 0.16); --theme-color: #65a30d; } [data-theme="night"] { --brand: #818cf8; --brand-dark: #6366f1; --brand-accent: #fbbf24; --bg-top: #1e1b4b; --bg-mid: #312e81; --bg-bottom: #3730a3; --text: #e0e7ff; --text-muted: rgba(224, 231, 255, 0.72); --tile-ring: rgba(129, 140, 248, 0.45); --btn-hover-bg: rgba(255, 255, 255, 0.1); --btn-active-bg: rgba(255, 255, 255, 0.16); --shadow-soft: rgba(0, 0, 0, 0.25); --shadow-strong: rgba(0, 0, 0, 0.4); --theme-color: #312e81; --pill-bg: rgba(30, 27, 75, 0.82); --pill-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); --surface-text: #e0e7ff; --surface-muted: rgba(224, 231, 255, 0.62); --surface-border: rgba(255, 255, 255, 0.12); --surface-control-bg: rgba(255, 255, 255, 0.08); --pill-blur: 14px; }