/* ============================================================ THEMES.CSS — 8 Farbthemen × Light / Dark PWA CSS Library by CSTRSK Aktivierung per data-theme Attribut:
(auch auf Elemente anwendbar) VERFÜGBARE THEMES: indigo (Standard) — ruhig, professionell rose — lebendig, warm, feminin ocean — tief, vertrauenswürdig forest — natürlich, nachhaltig amber — energetisch, freundlich violet — kreativ, premium slate — neutral, corporate coral — modern, trendig Je Theme: light (default) + dark Variante ============================================================ */ /* ╔══════════════════════════════════════════════════════════╗ ║ INDIGO (Standard — identisch mit tokens.css) ║ ╚══════════════════════════════════════════════════════════╝ */ [data-theme="indigo"], [data-theme="indigo-light"] { color-scheme: light; --color-brand-50: #eef2ff; --color-brand-100: #e0e7ff; --color-brand-200: #c7d2fe; --color-brand-300: #a5b4fc; --color-brand-400: #818cf8; --color-brand-500: #6366f1; --color-brand-600: #4f46e5; --color-brand-700: #4338ca; --color-brand-800: #3730a3; --color-brand-900: #312e81; --color-brand-950: #1e1b4b; --color-accent-400: #34d399; --color-accent-500: #10b981; --color-accent-600: #059669; --bg-base: #fafafa; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f4f4f5; --bg-overlay: rgba(0,0,0,.45); --border-default: #e4e4e7; --border-strong: #d4d4d8; --border-focus: #6366f1; --text-primary: #18181b; --text-secondary: #52525b; --text-tertiary: #a1a1aa; --text-disabled: #d4d4d8; --text-inverse: #ffffff; --text-brand: #4f46e5; --text-accent: #059669; --icon-default: #71717a; --icon-brand: #6366f1; --interactive-primary: #6366f1; --interactive-primary-hover: #4f46e5; --interactive-primary-text: #ffffff; --interactive-secondary: #f4f4f5; --interactive-secondary-hover:#e4e4e7; --interactive-destructive: #dc2626; --shadow-brand: 0 0 0 3px rgba(99,102,241,.25); } [data-theme="indigo-dark"] { color-scheme: dark; --color-brand-50: #eef2ff; --color-brand-100: #e0e7ff; --color-brand-400: #818cf8; --color-brand-500: #6366f1; --color-brand-600: #4f46e5; --bg-base: #09090b; --bg-surface: #18181b; --bg-elevated: #27272a; --bg-subtle: #27272a; --bg-overlay: rgba(0,0,0,.65); --border-default: #3f3f46; --border-strong: #52525b; --border-focus: #818cf8; --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-tertiary: #52525b; --text-disabled: #3f3f46; --text-inverse: #09090b; --text-brand: #818cf8; --text-accent: #34d399; --icon-default: #a1a1aa; --icon-brand: #818cf8; --interactive-primary: #6366f1; --interactive-primary-hover: #4f46e5; --interactive-primary-text: #ffffff; --interactive-secondary: #27272a; --interactive-secondary-hover:#3f3f46; --shadow-brand: 0 0 0 3px rgba(129,140,248,.3); } /* ╔══════════════════════════════════════════════════════════╗ ║ ROSE — warm, lebendig ║ ╚══════════════════════════════════════════════════════════╝ */ [data-theme="rose"], [data-theme="rose-light"] { color-scheme: light; --color-brand-50: #fff1f2; --color-brand-100: #ffe4e6; --color-brand-200: #fecdd3; --color-brand-300: #fda4af; --color-brand-400: #fb7185; --color-brand-500: #f43f5e; --color-brand-600: #e11d48; --color-brand-700: #be123c; --color-brand-800: #9f1239; --color-brand-900: #881337; --color-accent-400: #fb923c; --color-accent-500: #f97316; --color-accent-600: #ea580c; --bg-base: #fff5f5; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #fff1f2; --bg-overlay: rgba(136,19,55,.45); --border-default: #fecdd3; --border-strong: #fda4af; --border-focus: #f43f5e; --text-primary: #1c0a0a; --text-secondary: #6b2a3a; --text-tertiary: #fda4af; --text-disabled: #fecdd3; --text-inverse: #ffffff; --text-brand: #e11d48; --text-accent: #ea580c; --icon-default: #9f1239; --icon-brand: #f43f5e; --interactive-primary: #f43f5e; --interactive-primary-hover: #e11d48; --interactive-primary-text: #ffffff; --interactive-secondary: #fff1f2; --interactive-secondary-hover:#ffe4e6; --interactive-destructive: #dc2626; --shadow-brand: 0 0 0 3px rgba(244,63,94,.25); } [data-theme="rose-dark"] { color-scheme: dark; --color-brand-400: #fb7185; --color-brand-500: #f43f5e; --color-brand-600: #e11d48; --color-accent-400: #fb923c; --bg-base: #0d0305; --bg-surface: #1c0a0e; --bg-elevated: #2d0f18; --bg-subtle: #2d0f18; --bg-overlay: rgba(0,0,0,.65); --border-default: #4a1525; --border-strong: #6b2a3a; --border-focus: #fb7185; --text-primary: #fff1f2; --text-secondary: #fda4af; --text-tertiary: #6b2a3a; --text-disabled: #4a1525; --text-inverse: #0d0305; --text-brand: #fb7185; --text-accent: #fb923c; --icon-default: #fda4af; --icon-brand: #fb7185; --interactive-primary: #f43f5e; --interactive-primary-hover: #fb7185; --interactive-primary-text: #ffffff; --interactive-secondary: #2d0f18; --interactive-secondary-hover:#4a1525; --shadow-brand: 0 0 0 3px rgba(251,113,133,.3); } /* ╔══════════════════════════════════════════════════════════╗ ║ OCEAN — tief, vertrauenswürdig ║ ╚══════════════════════════════════════════════════════════╝ */ [data-theme="ocean"], [data-theme="ocean-light"] { color-scheme: light; --color-brand-50: #ecfeff; --color-brand-100: #cffafe; --color-brand-200: #a5f3fc; --color-brand-300: #67e8f9; --color-brand-400: #22d3ee; --color-brand-500: #06b6d4; --color-brand-600: #0891b2; --color-brand-700: #0e7490; --color-brand-800: #155e75; --color-brand-900: #164e63; --color-accent-400: #38bdf8; --color-accent-500: #0ea5e9; --color-accent-600: #0284c7; --bg-base: #f0fdfe; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #ecfeff; --bg-overlay: rgba(14,78,100,.5); --border-default: #a5f3fc; --border-strong: #67e8f9; --border-focus: #06b6d4; --text-primary: #083344; --text-secondary: #155e75; --text-tertiary: #67e8f9; --text-disabled: #a5f3fc; --text-inverse: #ffffff; --text-brand: #0891b2; --text-accent: #0284c7; --icon-default: #0e7490; --icon-brand: #06b6d4; --interactive-primary: #06b6d4; --interactive-primary-hover: #0891b2; --interactive-primary-text: #ffffff; --interactive-secondary: #ecfeff; --interactive-secondary-hover:#cffafe; --interactive-destructive: #dc2626; --shadow-brand: 0 0 0 3px rgba(6,182,212,.25); } [data-theme="ocean-dark"] { color-scheme: dark; --color-brand-400: #22d3ee; --color-brand-500: #06b6d4; --color-brand-600: #0891b2; --color-accent-400: #38bdf8; --bg-base: #020a0c; --bg-surface: #061a20; --bg-elevated: #0c2d38; --bg-subtle: #0c2d38; --bg-overlay: rgba(0,0,0,.65); --border-default: #0e4a5a; --border-strong: #155e75; --border-focus: #22d3ee; --text-primary: #ecfeff; --text-secondary: #67e8f9; --text-tertiary: #155e75; --text-disabled: #0e4a5a; --text-inverse: #020a0c; --text-brand: #22d3ee; --text-accent: #38bdf8; --icon-default: #67e8f9; --icon-brand: #22d3ee; --interactive-primary: #06b6d4; --interactive-primary-hover: #22d3ee; --interactive-primary-text: #ffffff; --interactive-secondary: #0c2d38; --interactive-secondary-hover:#0e4a5a; --shadow-brand: 0 0 0 3px rgba(34,211,238,.3); } /* ╔══════════════════════════════════════════════════════════╗ ║ FOREST — natürlich, nachhaltig ║ ╚══════════════════════════════════════════════════════════╝ */ [data-theme="forest"], [data-theme="forest-light"] { color-scheme: light; --color-brand-50: #f0fdf4; --color-brand-100: #dcfce7; --color-brand-200: #bbf7d0; --color-brand-300: #86efac; --color-brand-400: #4ade80; --color-brand-500: #22c55e; --color-brand-600: #16a34a; --color-brand-700: #15803d; --color-brand-800: #166534; --color-brand-900: #14532d; --color-accent-400: #a3e635; --color-accent-500: #84cc16; --color-accent-600: #65a30d; --bg-base: #f5fef7; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f0fdf4; --bg-overlay: rgba(20,83,45,.45); --border-default: #bbf7d0; --border-strong: #86efac; --border-focus: #22c55e; --text-primary: #052e16; --text-secondary: #166534; --text-tertiary: #86efac; --text-disabled: #bbf7d0; --text-inverse: #ffffff; --text-brand: #16a34a; --text-accent: #65a30d; --icon-default: #15803d; --icon-brand: #22c55e; --interactive-primary: #22c55e; --interactive-primary-hover: #16a34a; --interactive-primary-text: #ffffff; --interactive-secondary: #f0fdf4; --interactive-secondary-hover:#dcfce7; --interactive-destructive: #dc2626; --shadow-brand: 0 0 0 3px rgba(34,197,94,.25); } [data-theme="forest-dark"] { color-scheme: dark; --color-brand-400: #4ade80; --color-brand-500: #22c55e; --color-brand-600: #16a34a; --color-accent-400: #a3e635; --bg-base: #010a03; --bg-surface: #031a0a; --bg-elevated: #062d12; --bg-subtle: #062d12; --bg-overlay: rgba(0,0,0,.65); --border-default: #0a3d1a; --border-strong: #166534; --border-focus: #4ade80; --text-primary: #f0fdf4; --text-secondary: #86efac; --text-tertiary: #166534; --text-disabled: #0a3d1a; --text-inverse: #010a03; --text-brand: #4ade80; --text-accent: #a3e635; --icon-default: #86efac; --icon-brand: #4ade80; --interactive-primary: #22c55e; --interactive-primary-hover: #4ade80; --interactive-primary-text: #ffffff; --interactive-secondary: #062d12; --interactive-secondary-hover:#0a3d1a; --shadow-brand: 0 0 0 3px rgba(74,222,128,.3); } /* ╔══════════════════════════════════════════════════════════╗ ║ AMBER — energetisch, warm, freundlich ║ ╚══════════════════════════════════════════════════════════╝ */ [data-theme="amber"], [data-theme="amber-light"] { color-scheme: light; --color-brand-50: #fffbeb; --color-brand-100: #fef3c7; --color-brand-200: #fde68a; --color-brand-300: #fcd34d; --color-brand-400: #fbbf24; --color-brand-500: #f59e0b; --color-brand-600: #d97706; --color-brand-700: #b45309; --color-brand-800: #92400e; --color-brand-900: #78350f; --color-accent-400: #f97316; --color-accent-500: #ea580c; --color-accent-600: #c2410c; --bg-base: #fffdf5; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #fffbeb; --bg-overlay: rgba(120,53,15,.45); --border-default: #fde68a; --border-strong: #fcd34d; --border-focus: #f59e0b; --text-primary: #1c0a00; --text-secondary: #92400e; --text-tertiary: #fcd34d; --text-disabled: #fde68a; --text-inverse: #ffffff; --text-brand: #b45309; --text-accent: #c2410c; --icon-default: #b45309; --icon-brand: #f59e0b; --interactive-primary: #f59e0b; --interactive-primary-hover: #d97706; --interactive-primary-text: #1c0a00; --interactive-secondary: #fffbeb; --interactive-secondary-hover:#fef3c7; --interactive-destructive: #dc2626; --shadow-brand: 0 0 0 3px rgba(245,158,11,.3); } [data-theme="amber-dark"] { color-scheme: dark; --color-brand-400: #fbbf24; --color-brand-500: #f59e0b; --color-brand-600: #d97706; --color-accent-400: #f97316; --bg-base: #0c0700; --bg-surface: #1c1000; --bg-elevated: #2d1c00; --bg-subtle: #2d1c00; --bg-overlay: rgba(0,0,0,.65); --border-default: #3d2600; --border-strong: #78350f; --border-focus: #fbbf24; --text-primary: #fffbeb; --text-secondary: #fcd34d; --text-tertiary: #78350f; --text-disabled: #3d2600; --text-inverse: #0c0700; --text-brand: #fbbf24; --text-accent: #f97316; --icon-default: #fcd34d; --icon-brand: #fbbf24; --interactive-primary: #f59e0b; --interactive-primary-hover: #fbbf24; --interactive-primary-text: #1c0a00; --interactive-secondary: #2d1c00; --interactive-secondary-hover:#3d2600; --shadow-brand: 0 0 0 3px rgba(251,191,36,.3); } /* ╔══════════════════════════════════════════════════════════╗ ║ VIOLET — kreativ, premium, luxuriös ║ ╚══════════════════════════════════════════════════════════╝ */ [data-theme="violet"], [data-theme="violet-light"] { color-scheme: light; --color-brand-50: #f5f3ff; --color-brand-100: #ede9fe; --color-brand-200: #ddd6fe; --color-brand-300: #c4b5fd; --color-brand-400: #a78bfa; --color-brand-500: #8b5cf6; --color-brand-600: #7c3aed; --color-brand-700: #6d28d9; --color-brand-800: #5b21b6; --color-brand-900: #4c1d95; --color-accent-400: #e879f9; --color-accent-500: #d946ef; --color-accent-600: #c026d3; --bg-base: #faf8ff; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f5f3ff; --bg-overlay: rgba(76,29,149,.5); --border-default: #ddd6fe; --border-strong: #c4b5fd; --border-focus: #8b5cf6; --text-primary: #1e0a3c; --text-secondary: #5b21b6; --text-tertiary: #c4b5fd; --text-disabled: #ddd6fe; --text-inverse: #ffffff; --text-brand: #7c3aed; --text-accent: #c026d3; --icon-default: #6d28d9; --icon-brand: #8b5cf6; --interactive-primary: #8b5cf6; --interactive-primary-hover: #7c3aed; --interactive-primary-text: #ffffff; --interactive-secondary: #f5f3ff; --interactive-secondary-hover:#ede9fe; --interactive-destructive: #dc2626; --shadow-brand: 0 0 0 3px rgba(139,92,246,.25); } [data-theme="violet-dark"] { color-scheme: dark; --color-brand-400: #a78bfa; --color-brand-500: #8b5cf6; --color-brand-600: #7c3aed; --color-accent-400: #e879f9; --bg-base: #06030f; --bg-surface: #100820; --bg-elevated: #1a0d36; --bg-subtle: #1a0d36; --bg-overlay: rgba(0,0,0,.7); --border-default: #2e1065; --border-strong: #4c1d95; --border-focus: #a78bfa; --text-primary: #f5f3ff; --text-secondary: #c4b5fd; --text-tertiary: #4c1d95; --text-disabled: #2e1065; --text-inverse: #06030f; --text-brand: #a78bfa; --text-accent: #e879f9; --icon-default: #c4b5fd; --icon-brand: #a78bfa; --interactive-primary: #8b5cf6; --interactive-primary-hover: #a78bfa; --interactive-primary-text: #ffffff; --interactive-secondary: #1a0d36; --interactive-secondary-hover:#2e1065; --shadow-brand: 0 0 0 3px rgba(167,139,250,.3); } /* ╔══════════════════════════════════════════════════════════╗ ║ SLATE — neutral, corporate, seriös ║ ╚══════════════════════════════════════════════════════════╝ */ [data-theme="slate"], [data-theme="slate-light"] { color-scheme: light; --color-brand-50: #f8fafc; --color-brand-100: #f1f5f9; --color-brand-200: #e2e8f0; --color-brand-300: #cbd5e1; --color-brand-400: #94a3b8; --color-brand-500: #64748b; --color-brand-600: #475569; --color-brand-700: #334155; --color-brand-800: #1e293b; --color-brand-900: #0f172a; --color-accent-400: #38bdf8; --color-accent-500: #0ea5e9; --color-accent-600: #0284c7; --bg-base: #f8fafc; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f1f5f9; --bg-overlay: rgba(15,23,42,.5); --border-default: #e2e8f0; --border-strong: #cbd5e1; --border-focus: #64748b; --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8; --text-disabled: #e2e8f0; --text-inverse: #ffffff; --text-brand: #334155; --text-accent: #0284c7; --icon-default: #64748b; --icon-brand: #475569; --interactive-primary: #334155; --interactive-primary-hover: #1e293b; --interactive-primary-text: #ffffff; --interactive-secondary: #f1f5f9; --interactive-secondary-hover:#e2e8f0; --interactive-destructive: #dc2626; --shadow-brand: 0 0 0 3px rgba(100,116,139,.25); } [data-theme="slate-dark"] { color-scheme: dark; --color-brand-400: #94a3b8; --color-brand-500: #64748b; --color-brand-600: #475569; --color-accent-400: #38bdf8; --bg-base: #020617; --bg-surface: #0f172a; --bg-elevated: #1e293b; --bg-subtle: #1e293b; --bg-overlay: rgba(0,0,0,.7); --border-default: #1e293b; --border-strong: #334155; --border-focus: #94a3b8; --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-tertiary: #334155; --text-disabled: #1e293b; --text-inverse: #020617; --text-brand: #94a3b8; --text-accent: #38bdf8; --icon-default: #64748b; --icon-brand: #94a3b8; --interactive-primary: #475569; --interactive-primary-hover: #64748b; --interactive-primary-text: #ffffff; --interactive-secondary: #1e293b; --interactive-secondary-hover:#334155; --shadow-brand: 0 0 0 3px rgba(148,163,184,.2); } /* ╔══════════════════════════════════════════════════════════╗ ║ CORAL — modern, trendig, jugendlich ║ ╚══════════════════════════════════════════════════════════╝ */ [data-theme="coral"], [data-theme="coral-light"] { color-scheme: light; --color-brand-50: #fff7f5; --color-brand-100: #ffede8; --color-brand-200: #ffd5ca; --color-brand-300: #ffb3a0; --color-brand-400: #ff8566; --color-brand-500: #ff6347; --color-brand-600: #f04030; --color-brand-700: #c42e20; --color-brand-800: #9e2418; --color-brand-900: #7a1c12; --color-accent-400: #fbbf24; --color-accent-500: #f59e0b; --color-accent-600: #d97706; --bg-base: #fffaf8; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #fff7f5; --bg-overlay: rgba(122,28,18,.45); --border-default: #ffd5ca; --border-strong: #ffb3a0; --border-focus: #ff6347; --text-primary: #1a0600; --text-secondary: #7a2010; --text-tertiary: #ffb3a0; --text-disabled: #ffd5ca; --text-inverse: #ffffff; --text-brand: #c42e20; --text-accent: #d97706; --icon-default: #9e2418; --icon-brand: #ff6347; --interactive-primary: #ff6347; --interactive-primary-hover: #f04030; --interactive-primary-text: #ffffff; --interactive-secondary: #fff7f5; --interactive-secondary-hover:#ffede8; --interactive-destructive: #dc2626; --shadow-brand: 0 0 0 3px rgba(255,99,71,.25); } [data-theme="coral-dark"] { color-scheme: dark; --color-brand-400: #ff8566; --color-brand-500: #ff6347; --color-brand-600: #f04030; --color-accent-400: #fbbf24; --bg-base: #0d0200; --bg-surface: #1c0700; --bg-elevated: #2d1000; --bg-subtle: #2d1000; --bg-overlay: rgba(0,0,0,.65); --border-default: #4a1800; --border-strong: #7a2010; --border-focus: #ff8566; --text-primary: #fff7f5; --text-secondary: #ffb3a0; --text-tertiary: #7a2010; --text-disabled: #4a1800; --text-inverse: #0d0200; --text-brand: #ff8566; --text-accent: #fbbf24; --icon-default: #ffb3a0; --icon-brand: #ff8566; --interactive-primary: #ff6347; --interactive-primary-hover: #ff8566; --interactive-primary-text: #ffffff; --interactive-secondary: #2d1000; --interactive-secondary-hover:#4a1800; --shadow-brand: 0 0 0 3px rgba(255,133,102,.3); } /* ╔══════════════════════════════════════════════════════════╗ ║ MINT — frisch, clean, medizinisch ║ ╚══════════════════════════════════════════════════════════╝ */ [data-theme="mint"], [data-theme="mint-light"] { color-scheme: light; --color-brand-50: #f0fff4; --color-brand-100: #dcfff0; --color-brand-200: #abffd8; --color-brand-300: #6bffc0; --color-brand-400: #2dffa0; --color-brand-500: #00e87a; --color-brand-600: #00c266; --color-brand-700: #009950; --color-brand-800: #007840; --color-brand-900: #005c32; --color-accent-400: #34d399; --color-accent-500: #10b981; --color-accent-600: #059669; --bg-base: #f5fffa; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f0fff4; --bg-overlay: rgba(0,92,50,.45); --border-default: #abffd8; --border-strong: #6bffc0; --border-focus: #00e87a; --text-primary: #001a0e; --text-secondary: #005c32; --text-tertiary: #6bffc0; --text-disabled: #abffd8; --text-inverse: #ffffff; --text-brand: #009950; --text-accent: #059669; --icon-default: #007840; --icon-brand: #00e87a; --interactive-primary: #00e87a; --interactive-primary-hover: #00c266; --interactive-primary-text: #001a0e; --interactive-secondary: #f0fff4; --interactive-secondary-hover:#dcfff0; --interactive-destructive: #dc2626; --shadow-brand: 0 0 0 3px rgba(0,232,122,.25); } [data-theme="mint-dark"] { color-scheme: dark; --color-brand-400: #2dffa0; --color-brand-500: #00e87a; --color-brand-600: #00c266; --bg-base: #000c06; --bg-surface: #001a0e; --bg-elevated: #002d1a; --bg-subtle: #002d1a; --bg-overlay: rgba(0,0,0,.65); --border-default: #003d22; --border-strong: #005c32; --border-focus: #2dffa0; --text-primary: #f0fff4; --text-secondary: #6bffc0; --text-tertiary: #005c32; --text-disabled: #003d22; --text-inverse: #000c06; --text-brand: #2dffa0; --text-accent: #34d399; --icon-default: #6bffc0; --icon-brand: #2dffa0; --interactive-primary: #00e87a; --interactive-primary-hover: #2dffa0; --interactive-primary-text: #001a0e; --interactive-secondary: #002d1a; --interactive-secondary-hover:#003d22; --shadow-brand: 0 0 0 3px rgba(45,255,160,.3); } /* ════════════════════════════════════════════════════════════ THEME UTILITIES — Helfer, die auf alle Themes passen ════════════════════════════════════════════════════════════ */ /* Gradient Backgrounds per Theme */ [data-theme*="rose"] .gradient-brand { background: linear-gradient(135deg,#f43f5e,#e11d48); } [data-theme*="ocean"] .gradient-brand { background: linear-gradient(135deg,#06b6d4,#0891b2); } [data-theme*="forest"] .gradient-brand { background: linear-gradient(135deg,#22c55e,#16a34a); } [data-theme*="amber"] .gradient-brand { background: linear-gradient(135deg,#f59e0b,#d97706); } [data-theme*="violet"] .gradient-brand { background: linear-gradient(135deg,#8b5cf6,#7c3aed); } [data-theme*="slate"] .gradient-brand { background: linear-gradient(135deg,#475569,#334155); } [data-theme*="coral"] .gradient-brand { background: linear-gradient(135deg,#ff6347,#f04030); } [data-theme*="mint"] .gradient-brand { background: linear-gradient(135deg,#00e87a,#00c266); } /* Mesh gradients (Light themes) */ [data-theme*="rose-light"] .bg-mesh, [data-theme="rose"] .bg-mesh { background: radial-gradient(at 40% 20%, #ffe4e6 0px, transparent 50%), radial-gradient(at 80% 0%, #fff7ed 0px, transparent 50%), radial-gradient(at 0% 50%, #fce7f3 0px, transparent 50%), var(--bg-base); } [data-theme*="ocean-light"] .bg-mesh, [data-theme="ocean"] .bg-mesh { background: radial-gradient(at 40% 20%, #cffafe 0px, transparent 50%), radial-gradient(at 80% 0%, #e0f2fe 0px, transparent 50%), radial-gradient(at 0% 50%, #ecfeff 0px, transparent 50%), var(--bg-base); } [data-theme*="forest-light"] .bg-mesh, [data-theme="forest"] .bg-mesh { background: radial-gradient(at 40% 20%, #dcfce7 0px, transparent 50%), radial-gradient(at 80% 0%, #d9f99d 0px, transparent 50%), radial-gradient(at 0% 50%, #f0fdf4 0px, transparent 50%), var(--bg-base); } [data-theme*="violet-light"] .bg-mesh, [data-theme="violet"] .bg-mesh { background: radial-gradient(at 40% 20%, #ede9fe 0px, transparent 50%), radial-gradient(at 80% 0%, #fae8ff 0px, transparent 50%), radial-gradient(at 0% 50%, #f5f3ff 0px, transparent 50%), var(--bg-base); } [data-theme*="amber-light"] .bg-mesh, [data-theme="amber"] .bg-mesh { background: radial-gradient(at 40% 20%, #fef3c7 0px, transparent 50%), radial-gradient(at 80% 0%, #ffedd5 0px, transparent 50%), radial-gradient(at 0% 50%, #fffbeb 0px, transparent 50%), var(--bg-base); } /* Dark mesh */ [data-theme$="-dark"] .bg-mesh { background: radial-gradient(at 20% 80%, rgba(var(--interactive-primary),0.08) 0px, transparent 50%), var(--bg-base); } /* ════════════════════════════════════════════════════════════ THEME SWITCHER COMPONENT ════════════════════════════════════════════════════════════ */ .theme-switcher { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); } .theme-swatch { position: relative; width: 40px; height: 40px; border-radius: var(--radius-full); cursor: pointer; border: 3px solid transparent; transition: transform var(--duration-fast) var(--ease-spring), border-color var(--duration-fast) var(--ease-default); box-shadow: var(--shadow-sm); -webkit-tap-highlight-color: transparent; } .theme-swatch:hover { transform: scale(1.15); } .theme-swatch.is-active { border-color: var(--text-primary); transform: scale(1.1); } .theme-swatch[data-t="indigo"] { background: linear-gradient(135deg,#6366f1,#4338ca); } .theme-swatch[data-t="rose"] { background: linear-gradient(135deg,#f43f5e,#be123c); } .theme-swatch[data-t="ocean"] { background: linear-gradient(135deg,#06b6d4,#0e7490); } .theme-swatch[data-t="forest"] { background: linear-gradient(135deg,#22c55e,#15803d); } .theme-swatch[data-t="amber"] { background: linear-gradient(135deg,#f59e0b,#b45309); } .theme-swatch[data-t="violet"] { background: linear-gradient(135deg,#8b5cf6,#6d28d9); } .theme-swatch[data-t="slate"] { background: linear-gradient(135deg,#64748b,#1e293b); } .theme-swatch[data-t="coral"] { background: linear-gradient(135deg,#ff6347,#c42e20); } .theme-swatch[data-t="mint"] { background: linear-gradient(135deg,#00e87a,#007840); } .theme-swatch__label { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: var(--font-weight-semibold); color: var(--text-tertiary); white-space: nowrap; }