/* ═══════════════════════════════════════════════════════════════════════════ * Kallisto Design System — Theme Definitions * 5 themes: Default (Violet Light), Dark Glass, Light Warm, Dark Yellow, B&W * Apply via data-theme attribute on element. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Theme: Dark Glass (Smart Home Dashboard) ──────────────────────────── */ [data-theme="dark-glass"] { --bg-1: #191614; --bg-2: #221f1c; --bg-3: #2c2724; --ink: #f0ece8; --ink-2: #b5ada4; --ink-3: #7d756c; --line: rgba(255,255,255,0.07); --line-strong: rgba(255,255,255,0.13); --violet: #a78bfa; --violet-2: #7c5cbf; --sky: #60a5fa; --mint: #4ade80; --lavender: rgba(167,139,250,0.15); --lavender-2: rgba(167,139,250,0.25); --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --glass-bg: rgba(255,255,255,0.05); --glass-bg-strong: rgba(255,255,255,0.10); --glass-stroke: rgba(255,255,255,0.10); --glass-stroke-2: rgba(255,255,255,0.07); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 14px rgba(0,0,0,0.35); --shadow-lg: 0 8px 30px rgba(0,0,0,0.45); color-scheme: dark; } /* ── Theme: Light Warm (Orange Accent) ─────────────────────────────────── */ [data-theme="light-warm"] { --bg-1: #f7f2ec; --bg-2: #efe8e0; --bg-3: #e7ded4; --ink: #1c1710; --ink-2: #5c5348; --ink-3: #8c8278; --line: rgba(0,0,0,0.07); --line-strong: rgba(0,0,0,0.13); --violet: #e87a3a; --violet-2: #c45e22; --sky: #f0a060; --mint: #e8b888; --lavender: rgba(232,120,58,0.10); --lavender-2: rgba(232,120,58,0.18); --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --glass-bg: rgba(255,255,255,0.65); --glass-bg-strong: rgba(255,255,255,0.82); --glass-stroke: rgba(255,255,255,0.85); --glass-stroke-2: rgba(255,255,255,0.45); --shadow-sm: 0 1px 2px rgba(80,50,20,0.05), 0 3px 8px rgba(80,50,20,0.06); --shadow-md: 0 2px 4px rgba(80,50,20,0.06), 0 8px 24px rgba(80,50,20,0.08); --shadow-lg: 0 6px 16px rgba(80,50,20,0.08), 0 16px 40px rgba(80,50,20,0.10); } /* ── Theme: Dark Yellow (Smart Home) ───────────────────────────────────── */ [data-theme="dark-yellow"] { --bg-1: #0b0b0e; --bg-2: #131316; --bg-3: #1c1c22; --ink: #eeecf4; --ink-2: #a5a3ae; --ink-3: #666470; --line: rgba(255,255,255,0.06); --line-strong: rgba(255,255,255,0.11); --violet: #f5d547; --violet-2: #d4b530; --sky: #fde68a; --mint: #a3e635; --lavender: rgba(245,213,71,0.10); --lavender-2: rgba(245,213,71,0.18); --ok: #a3e635; --warn: #fbbf24; --bad: #f87171; --glass-bg: rgba(255,255,255,0.04); --glass-bg-strong: rgba(255,255,255,0.07); --glass-stroke: rgba(255,255,255,0.07); --glass-stroke-2: rgba(255,255,255,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 30px rgba(0,0,0,0.6); color-scheme: dark; } /* ── Theme: Black & White ──────────────────────────────────────────────── */ [data-theme="bw"] { --bg-1: #ffffff; --bg-2: #f5f5f5; --bg-3: #eaeaea; --ink: #000000; --ink-2: #3a3a3a; --ink-3: #888888; --line: rgba(0,0,0,0.09); --line-strong: rgba(0,0,0,0.16); --violet: #000000; --violet-2: #333333; --sky: #555555; --mint: #777777; --lavender: rgba(0,0,0,0.04); --lavender-2: rgba(0,0,0,0.08); --ok: #222222; --warn: #555555; --bad: #000000; --glass-bg: rgba(248,248,248,0.85); --glass-bg-strong: rgba(255,255,255,0.95); --glass-stroke: rgba(255,255,255,1); --glass-stroke-2: rgba(0,0,0,0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 3px 8px rgba(0,0,0,0.04); --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); --shadow-lg: 0 6px 16px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.08); } /* ═══════════════════════════════════════════════════════════════════════════ * Dark-theme component overrides * Components with hardcoded rgba values need dark-mode patches. * ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark-glass"], [data-theme="dark-yellow"], [data-theme="neumorph"] { & .kal-btn { background: var(--glass-bg); border-color: var(--glass-stroke-2); color: var(--ink); box-shadow: var(--shadow-sm); } & .kal-btn:hover { background: var(--glass-bg-strong); } & .kal-btn--primary { background: linear-gradient(135deg, var(--violet), var(--sky)); color: oklch(1 0 0); border-color: transparent; text-shadow: 0 1px 2px oklch(0 0 0 / 0.2); } & .kal-btn--primary:hover { background: linear-gradient(135deg, var(--violet), var(--sky)); color: oklch(1 0 0); filter: brightness(1.18); box-shadow: 0 6px 24px oklch(from var(--violet) l c h / 0.35), inset 0 1px 0 rgba(255,255,255,0.4); } & .kal-btn--primary:active { background: linear-gradient(135deg, var(--violet), var(--sky)); color: oklch(1 0 0); filter: brightness(0.92); transform: translateY(0) scale(0.97); } & .kal-btn--dark { background: rgba(255,255,255,0.12); color: oklch(0.92 0 0); border-color: rgba(255,255,255,0.10); } & .kal-btn--dark:hover { background: rgba(255,255,255,0.18); color: oklch(1 0 0); } & .kal-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); } & .kal-card { background: var(--glass-bg); border-color: var(--glass-stroke-2); } & .kal-card--dark { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.10); color: oklch(0.92 0 0); } & .kal-kpi { background: var(--glass-bg); border-color: var(--glass-stroke-2); } & .kal-input { background: var(--glass-bg); border-color: var(--glass-stroke-2); color: var(--ink); } & .kal-tag { background: var(--lavender); color: var(--violet); border-color: var(--glass-stroke-2); } & .kal-table td { border-color: var(--line); } & .kal-table th { border-color: var(--line); } & .kal-table tr:hover td { background: var(--glass-bg); } & .kal-toggle { background: rgba(255,255,255,0.08); } & .kal-toggle--on { background: var(--violet); } & .kal-toggle--on::after { background: var(--bg-1); } & .ds-demo-card { background: var(--glass-bg); } & .kal-btn--ghost:hover { background: rgba(255,255,255, 0.1); } & .kal-btn--danger { color: oklch(1 0 0); } & .kal-btn--danger:hover { background: oklch(0.30 0.08 30); border-color: oklch(0.50 0.14 30); } & .kal-bar { background: rgba(255,255,255, 0.1); } & .kal-seg { background: rgba(255,255,255, 0.06); } & .kal-seg__item { color: var(--ink-2); } & .kal-seg__item--active { background: rgba(255,255,255, 0.12); color: var(--ink); } } /* ── Backdrop per theme ────────────────────────────────────────────────── */ [data-theme="dark-glass"] .kal-aurora { background: radial-gradient(1200px 900px at 50% 0%, rgba(120,80,40,0.12), transparent 60%), linear-gradient(180deg, #191614, #141210); } [data-theme="dark-glass"] .kal-blob { opacity: 0.15; filter: blur(120px); } [data-theme="dark-glass"] .kal-grid-dots { opacity: 0.12; } [data-theme="dark-glass"] .kal-grid-dots { background-image: radial-gradient(circle, rgba(200,180,140,0.5) 1px, transparent 1.4px); } [data-theme="light-warm"] .kal-aurora { background: radial-gradient(1200px 900px at 50% 0%, rgba(232,120,58,0.08), transparent 60%), linear-gradient(180deg, #f7f2ec, #efe8e0); } [data-theme="light-warm"] .kal-blob { opacity: 0.12; filter: blur(120px); } [data-theme="light-warm"] .kal-blob { background: radial-gradient(circle at 40% 40%, rgba(232,120,58,0.5) 15%, rgba(240,160,96,0.4) 35%, rgba(232,184,136,0.4) 60%, rgba(200,120,60,0.3) 100%); } [data-theme="light-warm"] .kal-grid-dots { background-image: radial-gradient(circle, rgba(180,130,80,0.4) 1px, transparent 1.4px); } [data-theme="dark-yellow"] .kal-aurora { background: radial-gradient(1200px 900px at 50% 0%, rgba(245,213,71,0.05), transparent 60%), linear-gradient(180deg, #0b0b0e, #080810); } [data-theme="dark-yellow"] .kal-blob { opacity: 0.10; filter: blur(130px); } [data-theme="dark-yellow"] .kal-blob { background: radial-gradient(circle at 40% 40%, rgba(245,213,71,0.4) 15%, rgba(163,230,53,0.3) 45%, rgba(253,230,138,0.3) 75%, rgba(245,213,71,0.2) 100%); } [data-theme="dark-yellow"] .kal-grid-dots { background-image: radial-gradient(circle, rgba(245,213,71,0.3) 1px, transparent 1.4px); opacity: 0.15; } [data-theme="bw"] .kal-aurora { background: linear-gradient(180deg, #ffffff, #f8f8f8); } [data-theme="bw"] .kal-blob { opacity: 0; } [data-theme="bw"] .kal-grid-dots { background-image: radial-gradient(circle, rgba(0,0,0,0.2) 1px, transparent 1.4px); opacity: 0.25; } /* ── BW-specific overrides (no gradient) ──────────────────────────────── */ [data-theme="bw"] .kal-btn--primary { background: #000; color: #fff; border-color: #000; } [data-theme="bw"] .kal-btn--primary:hover { background: #222; } [data-theme="bw"] .kal-eyebrow { background: none; -webkit-text-fill-color: var(--ink-3); color: var(--ink-3); } [data-theme="bw"] .kal-bar__fill, [data-theme="bw"] .lg-progress__fill { background: #000; } [data-theme="bw"] .kal-toggle--on { background: #000; } /* ═══════════════════════════════════════════════════════════════════════════ * ADDITIONAL THEMES * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Theme: Neumorph (soft dark, pink/cyan neon dials, claymorphic) ────── */ [data-theme="neumorph"] { --bg-1: #1a1d26; --bg-2: #232733; --bg-3: #2c303c; --ink: #f0f2f7; --ink-2: #9da3b0; --ink-3: #5e6473; --line: rgba(255,255,255,0.05); --line-strong: rgba(255,255,255,0.10); --violet: oklch(0.68 0.24 330); /* hot pink */ --violet-2: oklch(0.55 0.24 330); --sky: oklch(0.80 0.14 195); /* cyan */ --mint: oklch(0.80 0.16 165); /* mint */ --lavender: rgba(216,85,255,0.10); --lavender-2: rgba(216,85,255,0.20); --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --glass-bg: rgba(255,255,255,0.03); --glass-bg-strong: rgba(255,255,255,0.06); --glass-stroke: rgba(255,255,255,0.08); --glass-stroke-2: rgba(255,255,255,0.04); --shadow-sm: -2px -2px 6px rgba(255,255,255,0.03), 4px 4px 10px rgba(0,0,0,0.35); --shadow-md: -4px -4px 12px rgba(255,255,255,0.04), 8px 8px 20px rgba(0,0,0,0.45); --shadow-lg: -8px -8px 22px rgba(255,255,255,0.05), 14px 14px 36px rgba(0,0,0,0.55); color-scheme: dark; } /* ── Theme: Mocha (warm espresso + cream) ──────────────────────────────── */ [data-theme="mocha"] { --bg-1: #f5efe6; --bg-2: #ece4d6; --bg-3: #e2d8c6; --ink: #2a1d10; --ink-2: #5e4a35; --ink-3: #8c7a62; --line: rgba(60,40,20,0.10); --line-strong: rgba(60,40,20,0.18); --violet: #8a5a3b; --violet-2: #5e3a22; --sky: #b18968; --mint: #c8a685; --lavender: rgba(138,90,59,0.10); --lavender-2: rgba(138,90,59,0.20); --ok: #5b8a47; --warn: #c98b2a; --bad: #b04a35; --glass-bg: rgba(255,247,235,0.65); --glass-bg-strong: rgba(255,247,235,0.85); --glass-stroke: rgba(255,247,235,0.85); --glass-stroke-2: rgba(255,247,235,0.45); --shadow-sm: 0 1px 2px rgba(80,50,20,0.06), 0 3px 8px rgba(80,50,20,0.07); --shadow-md: 0 2px 4px rgba(80,50,20,0.07), 0 8px 24px rgba(80,50,20,0.10); --shadow-lg: 0 6px 16px rgba(80,50,20,0.10), 0 16px 40px rgba(80,50,20,0.13); } /* ── Theme: Sage (cool herbal green + cream) ───────────────────────────── */ [data-theme="sage"] { --bg-1: #f3f5ee; --bg-2: #e9ede1; --bg-3: #dde3d1; --ink: #1c2418; --ink-2: #4e5847; --ink-3: #7e8775; --line: rgba(40,60,30,0.10); --line-strong: rgba(40,60,30,0.18); --violet: #5a8a52; --violet-2: #3e6638; --sky: #88b07a; --mint: #b5cfa2; --lavender: rgba(90,138,82,0.10); --lavender-2: rgba(90,138,82,0.20); --ok: #4f8a45; --warn: #c89b2a; --bad: #b04a35; --glass-bg: rgba(255,255,250,0.65); --glass-bg-strong: rgba(255,255,250,0.85); --glass-stroke: rgba(255,255,250,0.85); --glass-stroke-2: rgba(255,255,250,0.45); --shadow-sm: 0 1px 2px rgba(40,60,30,0.05), 0 3px 8px rgba(40,60,30,0.06); --shadow-md: 0 2px 4px rgba(40,60,30,0.06), 0 8px 24px rgba(40,60,30,0.09); --shadow-lg: 0 6px 16px rgba(40,60,30,0.09), 0 16px 40px rgba(40,60,30,0.12); } /* ── Theme: Midnight (deep navy + electric cyan) ───────────────────────── */ [data-theme="midnight"] { --bg-1: #0a1020; --bg-2: #121a2e; --bg-3: #1b2540; --ink: #e8edf8; --ink-2: #aab4c8; --ink-3: #6b7691; --line: rgba(255,255,255,0.07); --line-strong: rgba(255,255,255,0.14); --violet: #5cd8ff; --violet-2: #2caee0; --sky: #82e8ff; --mint: #7df3c4; --lavender: rgba(92,216,255,0.12); --lavender-2: rgba(92,216,255,0.22); --ok: #5fe3a8; --warn: #f3c264; --bad: #ff7a8a; --glass-bg: rgba(255,255,255,0.05); --glass-bg-strong: rgba(255,255,255,0.10); --glass-stroke: rgba(255,255,255,0.10); --glass-stroke-2: rgba(255,255,255,0.07); --shadow-sm: 0 1px 3px rgba(0,5,20,0.4); --shadow-md: 0 4px 16px rgba(0,5,20,0.5); --shadow-lg: 0 8px 30px rgba(0,5,20,0.6); color-scheme: dark; } /* ── Theme: Coral (peach + salmon on cream) ────────────────────────────── */ [data-theme="coral"] { --bg-1: #fcf3ee; --bg-2: #f8e7dd; --bg-3: #f2d8c8; --ink: #2a160d; --ink-2: #6b4032; --ink-3: #a07060; --line: rgba(80,40,20,0.10); --line-strong: rgba(80,40,20,0.18); --violet: #e85a55; --violet-2: #c83830; --sky: #f49080; --mint: #f8b8a0; --lavender: rgba(232,90,85,0.10); --lavender-2: rgba(232,90,85,0.20); --ok: #54a374; --warn: #e89020; --bad: #c83830; --glass-bg: rgba(255,250,245,0.65); --glass-bg-strong: rgba(255,250,245,0.85); --glass-stroke: rgba(255,250,245,0.85); --glass-stroke-2: rgba(255,250,245,0.45); --shadow-sm: 0 1px 2px rgba(120,40,20,0.06), 0 3px 8px rgba(120,40,20,0.07); --shadow-md: 0 2px 4px rgba(120,40,20,0.07), 0 8px 24px rgba(120,40,20,0.10); --shadow-lg: 0 6px 16px rgba(120,40,20,0.10), 0 16px 40px rgba(120,40,20,0.13); } /* ── Theme: Obsidian (deep mono dark + chrome) ─────────────────────────── */ [data-theme="obsidian"] { --bg-1: #0c0c10; --bg-2: #14141a; --bg-3: #1d1d25; --ink: #f4f4f8; --ink-2: #a8a8b4; --ink-3: #6a6a78; --line: rgba(255,255,255,0.06); --line-strong: rgba(255,255,255,0.13); --violet: #c8c8d4; --violet-2: #8e8ea0; --sky: #e0e0ea; --mint: #aebcc8; --lavender: rgba(200,200,212,0.10); --lavender-2: rgba(200,200,212,0.18); --ok: #6ee0a0; --warn: #f3c264; --bad: #ff7a8a; --glass-bg: rgba(255,255,255,0.04); --glass-bg-strong: rgba(255,255,255,0.08); --glass-stroke: rgba(255,255,255,0.08); --glass-stroke-2: rgba(255,255,255,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 4px 16px rgba(0,0,0,0.6); --shadow-lg: 0 8px 30px rgba(0,0,0,0.7); color-scheme: dark; } /* ── Dark-theme component overrides (new dark themes) ──────────────────── */ [data-theme="midnight"], [data-theme="obsidian"] { & .kal-btn { background: var(--glass-bg); border-color: var(--glass-stroke-2); color: var(--ink); box-shadow: var(--shadow-sm); } & .kal-btn:hover { background: var(--glass-bg-strong); } & .kal-btn--primary { background: linear-gradient(135deg, var(--violet), var(--sky)); color: oklch(1 0 0); border-color: transparent; text-shadow: 0 1px 2px oklch(0 0 0 / 0.2); } & .kal-btn--primary:hover { background: linear-gradient(135deg, var(--violet), var(--sky)); color: oklch(1 0 0); filter: brightness(1.18); box-shadow: 0 6px 24px oklch(from var(--violet) l c h / 0.35), inset 0 1px 0 rgba(255,255,255,0.4); } & .kal-btn--primary:active { background: linear-gradient(135deg, var(--violet), var(--sky)); color: oklch(1 0 0); filter: brightness(0.92); transform: translateY(0) scale(0.97); } & .kal-btn--dark { background: rgba(255,255,255,0.12); color: oklch(0.92 0 0); border-color: rgba(255,255,255,0.10); } & .kal-btn--dark:hover { background: rgba(255,255,255,0.18); color: oklch(1 0 0); } & .kal-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); } & .kal-card { background: var(--glass-bg); border-color: var(--glass-stroke-2); } & .kal-card--dark { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.10); color: oklch(0.92 0 0); } & .kal-kpi { background: var(--glass-bg); border-color: var(--glass-stroke-2); } & .kal-input { background: var(--glass-bg); border-color: var(--glass-stroke-2); color: var(--ink); } & .kal-tag { background: var(--lavender); color: var(--violet); border-color: var(--glass-stroke-2); } & .kal-table td, & .kal-table th { border-color: var(--line); } & .kal-table tr:hover td { background: var(--glass-bg); } & .kal-toggle { background: rgba(255,255,255,0.08); } & .kal-toggle--on { background: var(--violet); } & .kal-toggle--on::after { background: var(--bg-1); } & .ds-demo-card { background: var(--glass-bg); } & .kal-btn--ghost:hover { background: rgba(255,255,255, 0.08); } & .kal-btn--danger { color: oklch(1 0 0); } & .kal-btn--danger:hover { background: oklch(0.28 0.08 30); border-color: oklch(0.45 0.14 30); } & .kal-bar { background: rgba(255,255,255, 0.08); } & .kal-seg { background: rgba(255,255,255, 0.06); } & .kal-seg__item { color: var(--ink-2); } & .kal-seg__item--active { background: rgba(255,255,255, 0.12); color: var(--ink); } } /* ── Liquid-glass dark token overrides ───────────────────────────────────── */ [data-theme="midnight"], [data-theme="obsidian"] { --lg-bg: rgba(255,255,255, 0.04); --lg-bg-hover: rgba(255,255,255, 0.07); --lg-bg-active: rgba(255,255,255, 0.10); --lg-border: rgba(255,255,255, 0.08); --lg-specular: rgba(255,255,255, 0.03); --lg-shadow: rgba(0,0,0, 0.4); --lg-text: var(--ink); --lg-text-secondary: var(--ink-2); } [data-theme="dark-glass"], [data-theme="dark-yellow"], [data-theme="neumorph"] { --lg-bg: rgba(255,255,255, 0.06); --lg-bg-hover: rgba(255,255,255, 0.10); --lg-bg-active: rgba(255,255,255, 0.14); --lg-border: rgba(255,255,255, 0.10); --lg-specular: rgba(255,255,255, 0.04); --lg-shadow: rgba(0,0,0, 0.3); --lg-text: var(--ink); --lg-text-secondary: var(--ink-2); } /* ── Backdrop per new theme ────────────────────────────────────────────── */ [data-theme="mocha"] .kal-aurora { background: radial-gradient(1200px 900px at 50% 0%, rgba(138,90,59,0.10), transparent 60%), linear-gradient(180deg, #f5efe6, #ece4d6); } [data-theme="mocha"] .kal-blob { opacity: 0.13; filter: blur(120px); background: radial-gradient(circle at 40% 40%, rgba(138,90,59,0.5) 15%, rgba(177,137,104,0.4) 45%, rgba(200,166,133,0.3) 100%); } [data-theme="mocha"] .kal-grid-dots { background-image: radial-gradient(circle, rgba(120,80,40,0.4) 1px, transparent 1.4px); } [data-theme="sage"] .kal-aurora { background: radial-gradient(1200px 900px at 50% 0%, rgba(90,138,82,0.10), transparent 60%), linear-gradient(180deg, #f3f5ee, #e9ede1); } [data-theme="sage"] .kal-blob { opacity: 0.13; filter: blur(120px); background: radial-gradient(circle at 40% 40%, rgba(90,138,82,0.5) 15%, rgba(136,176,122,0.4) 45%, rgba(181,207,162,0.3) 100%); } [data-theme="sage"] .kal-grid-dots { background-image: radial-gradient(circle, rgba(60,100,50,0.4) 1px, transparent 1.4px); } [data-theme="midnight"] .kal-aurora { background: radial-gradient(1200px 900px at 50% 0%, rgba(92,216,255,0.10), transparent 60%), linear-gradient(180deg, #0a1020, #060914); } [data-theme="midnight"] .kal-blob { opacity: 0.18; filter: blur(130px); background: radial-gradient(circle at 40% 40%, rgba(92,216,255,0.5) 15%, rgba(44,174,224,0.4) 45%, rgba(130,232,255,0.3) 100%); } [data-theme="midnight"] .kal-grid-dots { background-image: radial-gradient(circle, rgba(92,216,255,0.4) 1px, transparent 1.4px); opacity: 0.18; } [data-theme="coral"] .kal-aurora { background: radial-gradient(1200px 900px at 50% 0%, rgba(232,90,85,0.10), transparent 60%), linear-gradient(180deg, #fcf3ee, #f8e7dd); } [data-theme="coral"] .kal-blob { opacity: 0.14; filter: blur(120px); background: radial-gradient(circle at 40% 40%, rgba(232,90,85,0.5) 15%, rgba(244,144,128,0.4) 45%, rgba(248,184,160,0.3) 100%); } [data-theme="coral"] .kal-grid-dots { background-image: radial-gradient(circle, rgba(180,80,60,0.4) 1px, transparent 1.4px); } [data-theme="obsidian"] .kal-aurora { background: radial-gradient(1200px 900px at 50% 0%, rgba(200,200,212,0.05), transparent 60%), linear-gradient(180deg, #0c0c10, #080810); } [data-theme="obsidian"] .kal-blob { opacity: 0.10; filter: blur(140px); background: radial-gradient(circle at 40% 40%, rgba(200,200,212,0.4) 15%, rgba(142,142,160,0.3) 45%, rgba(180,180,200,0.2) 100%); } [data-theme="obsidian"] .kal-grid-dots { background-image: radial-gradient(circle, rgba(200,200,212,0.25) 1px, transparent 1.4px); opacity: 0.18; } /* ── Backdrop: Neumorph (deep slate, faint pink glow) ──────────────────── */ [data-theme="neumorph"] .kal-aurora { background: radial-gradient(900px 700px at 50% 0%, rgba(216,85,255,0.06), transparent 60%), linear-gradient(180deg, #1a1d26, #15181f); } [data-theme="neumorph"] .kal-blob { opacity: 0.10; filter: blur(140px); background: radial-gradient(circle at 40% 40%, rgba(216,85,255,0.5) 15%, rgba(120,200,255,0.4) 45%, rgba(120,255,200,0.3) 100%); } [data-theme="neumorph"] .kal-grid-dots { opacity: 0; } /* ── Theme: Liquid Glass — frosted translucent, specular highlights ──── */ [data-theme="liquid-glass"] { --bg-1: oklch(0.96 0.008 260); --bg-2: oklch(0.93 0.010 260); --bg-3: oklch(0.90 0.012 260); --ink: oklch(0.18 0.015 270); --ink-2: oklch(0.40 0.020 270); --ink-3: oklch(0.58 0.015 270); --line: rgba(255,255,255,0.60); --line-strong: rgba(255,255,255,0.80); --violet: oklch(0.58 0.22 285); --violet-2: oklch(0.48 0.20 285); --sky: oklch(0.62 0.15 230); --mint: oklch(0.68 0.14 160); --lavender: oklch(0.58 0.22 285 / 0.10); --lavender-2: oklch(0.58 0.22 285 / 0.18); --ok: oklch(0.62 0.16 150); --warn: oklch(0.72 0.14 70); --bad: oklch(0.62 0.18 30); --glass-bg: rgba(255,255,255,0.45); --glass-bg-strong: rgba(255,255,255,0.68); --glass-stroke: rgba(255,255,255,0.90); --glass-stroke-2: rgba(255,255,255,0.50); --shadow-sm: 0 1px 3px oklch(0.50 0.05 270 / 0.06), 0 2px 8px oklch(0.50 0.05 270 / 0.04); --shadow-md: 0 4px 12px oklch(0.50 0.05 270 / 0.08), 0 12px 28px oklch(0.50 0.05 270 / 0.06); --shadow-lg: 0 8px 24px oklch(0.50 0.05 270 / 0.10), 0 24px 48px oklch(0.50 0.05 270 / 0.08); --lg-bg: rgba(255,255,255,0.32); --lg-bg-hover: rgba(255,255,255,0.42); --lg-bg-active: rgba(255,255,255,0.52); --lg-border: rgba(255,255,255,0.50); --lg-specular: rgba(255,255,255,0.75); --lg-shadow: oklch(0.50 0.05 270 / 0.12); --lg-text: var(--ink); --lg-text-secondary: var(--ink-2); color-scheme: light; } /* ── Liquid Glass backdrop ──────────────────────────────────────────────── */ [data-theme="liquid-glass"] .kal-aurora { background: radial-gradient(1200px 900px at 50% 0%, oklch(0.68 0.12 285 / 0.08), transparent 60%), radial-gradient(800px 600px at 80% 80%, oklch(0.62 0.10 230 / 0.06), transparent 50%), linear-gradient(180deg, oklch(0.96 0.008 260), oklch(0.93 0.010 260)); } [data-theme="liquid-glass"] .kal-blob { opacity: 0.10; filter: blur(140px); background: radial-gradient(circle at 40% 40%, oklch(0.58 0.22 285 / 0.5) 15%, oklch(0.62 0.15 230 / 0.4) 45%, oklch(0.68 0.14 160 / 0.3) 100%); } [data-theme="liquid-glass"] .kal-grid-dots { background-image: radial-gradient(circle, oklch(0.50 0.08 270 / 0.15) 1px, transparent 1.4px); } /* ── Smooth theme transition ───────────────────────────────────────────── */ [data-theme] { transition: background-color 0.4s ease, color 0.3s ease; }