/* ============================================================================ * TaleClip Theme System * * Eleven themes, each with full Dark + Light palettes, applied via two data * attributes on : * * * Token contract — see docs/theme_feature.md. Every token is opt-in: existing * code that uses --tc-* variables that aren't redefined here keeps working. * Components that need theming should reference these token names instead of * hard-coding hex values. * * Mode separation: * data-theme-mode="dark" → dark variant * data-theme-mode="light" → light variant * Theme and mode are independent — switching one does NOT reset the other. * ========================================================================== */ /* ----- defaults: Taleclip Default DARK (current look) --------------------- */ :root, [data-theme-id="default"][data-theme-mode="dark"], [data-theme-mode="dark"]:not([data-theme-id]) { --tc-bg: #0b0f1a; --tc-bg-muted: #11172a; --tc-bg-elevated: #161d33; --tc-sidebar-bg: rgba(20,16,38,0.72); --tc-sidebar-active: rgba(168,85,247,0.18); --tc-sidebar-hover: rgba(168,85,247,0.10); --tc-header-bg: rgba(15,17,31,0.65); --tc-card-bg: #141a2c; --tc-card-glass: rgba(31,27,52,0.55); --tc-card-hover: rgba(255,255,255,0.04); --tc-border: #2b2f44; --tc-border-strong: #475569; --tc-text: #e4e7ec; --tc-text-muted: #94a3b8; --tc-text-soft: #64748b; --tc-primary: #f59e0b; --tc-primary-hover: #d97706; --tc-primary-text: #1a1206; --tc-secondary: #8b5cf6; --tc-secondary-hover: #7c3aed; --tc-secondary-text: #ffffff; --tc-accent: #a855f7; --tc-accent-hover: #9333ea; --tc-admin: #fb923c; --tc-admin-hover: #f97316; --tc-success: #22c55e; --tc-warning: #fbbf24; --tc-danger: #ef4444; --tc-info: #3b82f6; --tc-link: #c4b5fd; --tc-shadow: 0 4px 24px rgba(0,0,0,0.45); --tc-glow: 0 0 30px rgba(168,85,247,0.25); --tc-table-header: #1a2138; --tc-table-row: #141a2c; --tc-table-row-hover: rgba(168,85,247,0.10); --tc-input-bg: #0f1426; --tc-input-border: #2b2f44; --tc-input-text: #e4e7ec; --tc-modal-bg: #161d33; --tc-modal-border: #2b2f44; --tc-focus-ring: 0 0 0 3px rgba(168,85,247,0.55); --tc-progress-bg: #1a2138; --tc-progress-fill: linear-gradient(90deg, #a855f7, #f59e0b); --tc-badge-bg: rgba(168,85,247,0.18); --tc-badge-text: #e9d5ff; } /* ----- Taleclip Default LIGHT --------------------------------------------- */ [data-theme-id="default"][data-theme-mode="light"], [data-theme-mode="light"]:not([data-theme-id]) { --tc-bg: #f5f3fa; --tc-bg-muted: #ece8f5; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: rgba(255,255,255,0.88); --tc-sidebar-active: rgba(168,85,247,0.16); --tc-sidebar-hover: rgba(168,85,247,0.08); --tc-header-bg: rgba(255,255,255,0.85); --tc-card-bg: #ffffff; --tc-card-glass: rgba(255,255,255,0.75); --tc-card-hover: rgba(168,85,247,0.06); --tc-border: #e2e0eb; --tc-border-strong: #cbd5e1; --tc-text: #1e1b2c; --tc-text-muted: #4b5563; --tc-text-soft: #6b7280; --tc-primary: #d97706; --tc-primary-hover: #b45309; --tc-primary-text: #ffffff; --tc-secondary: #7c3aed; --tc-secondary-hover: #6d28d9; --tc-secondary-text: #ffffff; --tc-accent: #9333ea; --tc-accent-hover: #7e22ce; --tc-admin: #ea580c; --tc-admin-hover: #c2410c; --tc-success: #16a34a; --tc-warning: #d97706; --tc-danger: #dc2626; --tc-info: #2563eb; --tc-link: #6d28d9; --tc-shadow: 0 4px 20px rgba(60,40,120,0.10); --tc-glow: 0 0 24px rgba(168,85,247,0.18); --tc-table-header: #ece8f5; --tc-table-row: #ffffff; --tc-table-row-hover: rgba(168,85,247,0.08); --tc-input-bg: #ffffff; --tc-input-border: #d4d2e0; --tc-input-text: #1e1b2c; --tc-modal-bg: #ffffff; --tc-modal-border: #e2e0eb; --tc-focus-ring: 0 0 0 3px rgba(168,85,247,0.40); --tc-progress-bg: #ece8f5; --tc-progress-fill: linear-gradient(90deg, #9333ea, #d97706); --tc-badge-bg: rgba(168,85,247,0.14); --tc-badge-text: #4c1d95; } /* ============================================================================ * MIDNIGHT VIOLET — premium AI studio * ========================================================================== */ [data-theme-id="midnightViolet"][data-theme-mode="dark"] { --tc-bg: #07060f; --tc-bg-muted: #0c0a1f; --tc-bg-elevated: #141033; --tc-sidebar-bg: rgba(17,12,42,0.78); --tc-sidebar-active: rgba(139,92,246,0.22); --tc-sidebar-hover: rgba(139,92,246,0.12); --tc-header-bg: rgba(10,8,24,0.75); --tc-card-bg: #14112c; --tc-card-glass: rgba(35,25,72,0.62); --tc-card-hover: rgba(167,139,250,0.08); --tc-border: #312b54; --tc-border-strong: #6d28d9; --tc-text: #ede9fe; --tc-text-muted: #c4b5fd; --tc-text-soft: #8b7fc4; --tc-primary: #a78bfa; --tc-primary-hover: #8b5cf6; --tc-primary-text: #0f0a24; --tc-secondary: #ec4899; --tc-secondary-hover: #db2777; --tc-secondary-text: #ffffff; --tc-accent: #818cf8; --tc-accent-hover: #6366f1; --tc-admin: #f472b6; --tc-admin-hover: #ec4899; --tc-info: #818cf8; --tc-link: #c4b5fd; --tc-shadow: 0 6px 30px rgba(99,30,180,0.40); --tc-glow: 0 0 36px rgba(139,92,246,0.40); --tc-table-header: #1a1545; --tc-table-row: #14112c; --tc-table-row-hover: rgba(139,92,246,0.14); --tc-input-bg: #0e0a24; --tc-input-border: #312b54; --tc-input-text: #ede9fe; --tc-modal-bg: #141033; --tc-modal-border: #312b54; --tc-focus-ring: 0 0 0 3px rgba(167,139,250,0.55); --tc-progress-bg: #1a1545; --tc-progress-fill: linear-gradient(90deg, #a78bfa, #ec4899); --tc-badge-bg: rgba(167,139,250,0.22); --tc-badge-text: #ede9fe; } [data-theme-id="midnightViolet"][data-theme-mode="light"] { --tc-bg: #f6f3fc; --tc-bg-muted: #ebe5f7; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: rgba(255,255,255,0.90); --tc-sidebar-active: rgba(139,92,246,0.18); --tc-sidebar-hover: rgba(139,92,246,0.08); --tc-header-bg: rgba(255,255,255,0.85); --tc-card-bg: #ffffff; --tc-card-glass: rgba(245,243,255,0.85); --tc-card-hover: rgba(139,92,246,0.06); --tc-border: #e0d8f2; --tc-border-strong: #c4b5fd; --tc-text: #2a1b4a; --tc-text-muted: #5b4b85; --tc-text-soft: #8478a8; --tc-primary: #7c3aed; --tc-primary-hover: #6d28d9; --tc-primary-text: #ffffff; --tc-secondary: #db2777; --tc-secondary-hover: #be185d; --tc-secondary-text: #ffffff; --tc-accent: #6366f1; --tc-accent-hover: #4f46e5; --tc-admin: #ec4899; --tc-admin-hover: #db2777; --tc-info: #6366f1; --tc-link: #6d28d9; --tc-shadow: 0 4px 22px rgba(99,30,180,0.12); --tc-glow: 0 0 24px rgba(139,92,246,0.22); --tc-table-header: #ebe5f7; --tc-table-row: #ffffff; --tc-table-row-hover: rgba(139,92,246,0.08); --tc-input-bg: #ffffff; --tc-input-border: #d8cdf2; --tc-input-text: #2a1b4a; --tc-modal-bg: #ffffff; --tc-modal-border: #e0d8f2; --tc-focus-ring: 0 0 0 3px rgba(124,58,237,0.45); --tc-progress-bg: #ebe5f7; --tc-progress-fill: linear-gradient(90deg, #7c3aed, #db2777); --tc-badge-bg: rgba(124,58,237,0.14); --tc-badge-text: #4c1d95; } /* ============================================================================ * EMERALD CIRCUIT — local AI / server dashboard * ========================================================================== */ [data-theme-id="emeraldCircuit"][data-theme-mode="dark"] { --tc-bg: #08120e; --tc-bg-muted: #0d1f18; --tc-bg-elevated: #122b22; --tc-sidebar-bg: rgba(14,30,24,0.80); --tc-sidebar-active: rgba(16,185,129,0.20); --tc-sidebar-hover: rgba(16,185,129,0.10); --tc-header-bg: rgba(10,22,18,0.78); --tc-card-bg: #112a22; --tc-card-glass: rgba(22,52,42,0.62); --tc-card-hover: rgba(52,211,153,0.07); --tc-border: #1f3d33; --tc-border-strong: #047857; --tc-text: #d1fae5; --tc-text-muted: #6ee7b7; --tc-text-soft: #5a8478; --tc-primary: #10b981; --tc-primary-hover: #059669; --tc-primary-text: #02110b; --tc-secondary: #14b8a6; --tc-secondary-hover: #0d9488; --tc-secondary-text: #ffffff; --tc-accent: #34d399; --tc-accent-hover: #10b981; --tc-admin: #84cc16; --tc-admin-hover: #65a30d; --tc-link: #6ee7b7; --tc-shadow: 0 4px 24px rgba(0,40,30,0.55); --tc-glow: 0 0 30px rgba(16,185,129,0.30); --tc-table-header: #173b2f; --tc-table-row: #112a22; --tc-table-row-hover: rgba(16,185,129,0.12); --tc-input-bg: #0c1f18; --tc-input-border: #1f3d33; --tc-input-text: #d1fae5; --tc-modal-bg: #122b22; --tc-modal-border: #1f3d33; --tc-focus-ring: 0 0 0 3px rgba(52,211,153,0.55); --tc-progress-bg: #173b2f; --tc-progress-fill: linear-gradient(90deg, #10b981, #14b8a6); --tc-badge-bg: rgba(16,185,129,0.20); --tc-badge-text: #d1fae5; } [data-theme-id="emeraldCircuit"][data-theme-mode="light"] { --tc-bg: #ecfdf5; --tc-bg-muted: #d1fae5; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: rgba(255,255,255,0.90); --tc-sidebar-active: rgba(16,185,129,0.18); --tc-sidebar-hover: rgba(16,185,129,0.08); --tc-header-bg: rgba(255,255,255,0.88); --tc-card-bg: #ffffff; --tc-card-glass: rgba(236,253,245,0.85); --tc-card-hover: rgba(16,185,129,0.07); --tc-border: #d1fae5; --tc-border-strong: #6ee7b7; --tc-text: #064e3b; --tc-text-muted: #047857; --tc-text-soft: #4b8779; --tc-primary: #059669; --tc-primary-hover: #047857; --tc-primary-text: #ffffff; --tc-secondary: #0d9488; --tc-secondary-hover: #0f766e; --tc-secondary-text: #ffffff; --tc-accent: #10b981; --tc-accent-hover: #059669; --tc-admin: #65a30d; --tc-admin-hover: #4d7c0f; --tc-link: #047857; --tc-shadow: 0 4px 20px rgba(6,78,59,0.10); --tc-glow: 0 0 22px rgba(16,185,129,0.20); --tc-table-header: #d1fae5; --tc-table-row: #ffffff; --tc-table-row-hover: rgba(16,185,129,0.08); --tc-input-bg: #ffffff; --tc-input-border: #c4eedd; --tc-input-text: #064e3b; --tc-modal-bg: #ffffff; --tc-modal-border: #d1fae5; --tc-focus-ring: 0 0 0 3px rgba(5,150,105,0.40); --tc-progress-bg: #d1fae5; --tc-progress-fill: linear-gradient(90deg, #059669, #0d9488); --tc-badge-bg: rgba(5,150,105,0.14); --tc-badge-text: #064e3b; } /* ============================================================================ * SOLAR EMBER — warm creator studio * ========================================================================== */ [data-theme-id="solarEmber"][data-theme-mode="dark"] { --tc-bg: #150c08; --tc-bg-muted: #211410; --tc-bg-elevated: #2f1d14; --tc-sidebar-bg: rgba(40,22,14,0.80); --tc-sidebar-active: rgba(251,146,60,0.20); --tc-sidebar-hover: rgba(251,146,60,0.10); --tc-header-bg: rgba(18,12,8,0.78); --tc-card-bg: #261611; --tc-card-glass: rgba(58,36,24,0.65); --tc-card-hover: rgba(251,191,36,0.06); --tc-border: #4b2d1d; --tc-border-strong: #b45309; --tc-text: #fef3c7; --tc-text-muted: #fcd34d; --tc-text-soft: #a17a55; --tc-primary: #f97316; --tc-primary-hover: #ea580c; --tc-primary-text: #1a0a02; --tc-secondary: #ef4444; --tc-secondary-hover: #dc2626; --tc-secondary-text: #ffffff; --tc-accent: #fbbf24; --tc-accent-hover: #f59e0b; --tc-admin: #dc2626; --tc-admin-hover: #b91c1c; --tc-link: #fbbf24; --tc-shadow: 0 4px 24px rgba(120,40,0,0.45); --tc-glow: 0 0 30px rgba(249,115,22,0.35); --tc-table-header: #3a2418; --tc-table-row: #261611; --tc-table-row-hover: rgba(251,146,60,0.12); --tc-input-bg: #1c100a; --tc-input-border: #4b2d1d; --tc-input-text: #fef3c7; --tc-modal-bg: #2f1d14; --tc-modal-border: #4b2d1d; --tc-focus-ring: 0 0 0 3px rgba(251,146,60,0.55); --tc-progress-bg: #3a2418; --tc-progress-fill: linear-gradient(90deg, #f97316, #fbbf24); --tc-badge-bg: rgba(251,146,60,0.20); --tc-badge-text: #fef3c7; } [data-theme-id="solarEmber"][data-theme-mode="light"] { --tc-bg: #fff8ed; --tc-bg-muted: #fff1d6; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: rgba(255,255,255,0.92); --tc-sidebar-active: rgba(249,115,22,0.16); --tc-sidebar-hover: rgba(249,115,22,0.08); --tc-header-bg: rgba(255,255,255,0.90); --tc-card-bg: #ffffff; --tc-card-glass: rgba(255,247,237,0.88); --tc-card-hover: rgba(249,115,22,0.07); --tc-border: #f5d4a4; --tc-border-strong: #f59e0b; --tc-text: #451a03; --tc-text-muted: #92400e; --tc-text-soft: #b45309; --tc-primary: #ea580c; --tc-primary-hover: #c2410c; --tc-primary-text: #ffffff; --tc-secondary: #dc2626; --tc-secondary-hover: #b91c1c; --tc-secondary-text: #ffffff; --tc-accent: #f59e0b; --tc-accent-hover: #d97706; --tc-admin: #b91c1c; --tc-admin-hover: #991b1b; --tc-link: #c2410c; --tc-shadow: 0 4px 20px rgba(180,80,0,0.12); --tc-glow: 0 0 22px rgba(249,115,22,0.20); --tc-table-header: #fff1d6; --tc-table-row: #ffffff; --tc-table-row-hover: rgba(249,115,22,0.08); --tc-input-bg: #ffffff; --tc-input-border: #f5d4a4; --tc-input-text: #451a03; --tc-modal-bg: #ffffff; --tc-modal-border: #f5d4a4; --tc-focus-ring: 0 0 0 3px rgba(234,88,12,0.40); --tc-progress-bg: #fff1d6; --tc-progress-fill: linear-gradient(90deg, #ea580c, #f59e0b); --tc-badge-bg: rgba(234,88,12,0.14); --tc-badge-text: #7c2d12; } /* ============================================================================ * ARCTIC GLASS — cool technical * ========================================================================== */ [data-theme-id="arcticGlass"][data-theme-mode="dark"] { --tc-bg: #0a1424; --tc-bg-muted: #102134; --tc-bg-elevated: #1a3050; --tc-sidebar-bg: rgba(18,38,68,0.78); --tc-sidebar-active: rgba(34,211,238,0.20); --tc-sidebar-hover: rgba(34,211,238,0.10); --tc-header-bg: rgba(10,20,36,0.75); --tc-card-bg: #122740; --tc-card-glass: rgba(26,55,90,0.55); --tc-card-hover: rgba(125,211,252,0.06); --tc-border: #2c4870; --tc-border-strong: #0e7490; --tc-text: #e0f2fe; --tc-text-muted: #7dd3fc; --tc-text-soft: #64748b; --tc-primary: #06b6d4; --tc-primary-hover: #0891b2; --tc-primary-text: #04141a; --tc-secondary: #38bdf8; --tc-secondary-hover: #0ea5e9; --tc-secondary-text: #ffffff; --tc-accent: #22d3ee; --tc-accent-hover: #06b6d4; --tc-admin: #0ea5e9; --tc-admin-hover: #0284c7; --tc-link: #7dd3fc; --tc-shadow: 0 4px 24px rgba(0,20,60,0.55); --tc-glow: 0 0 30px rgba(34,211,238,0.30); --tc-table-header: #1a3050; --tc-table-row: #122740; --tc-table-row-hover: rgba(34,211,238,0.12); --tc-input-bg: #0d1a2e; --tc-input-border: #2c4870; --tc-input-text: #e0f2fe; --tc-modal-bg: #1a3050; --tc-modal-border: #2c4870; --tc-focus-ring: 0 0 0 3px rgba(34,211,238,0.55); --tc-progress-bg: #1a3050; --tc-progress-fill: linear-gradient(90deg, #06b6d4, #38bdf8); --tc-badge-bg: rgba(34,211,238,0.20); --tc-badge-text: #e0f2fe; } [data-theme-id="arcticGlass"][data-theme-mode="light"] { --tc-bg: #f0f9ff; --tc-bg-muted: #e0f2fe; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: rgba(255,255,255,0.92); --tc-sidebar-active: rgba(6,182,212,0.18); --tc-sidebar-hover: rgba(6,182,212,0.08); --tc-header-bg: rgba(255,255,255,0.90); --tc-card-bg: #ffffff; --tc-card-glass: rgba(240,249,255,0.88); --tc-card-hover: rgba(6,182,212,0.07); --tc-border: #bae6fd; --tc-border-strong: #7dd3fc; --tc-text: #0c2540; --tc-text-muted: #0e7490; --tc-text-soft: #475569; --tc-primary: #0891b2; --tc-primary-hover: #0e7490; --tc-primary-text: #ffffff; --tc-secondary: #0284c7; --tc-secondary-hover: #0369a1; --tc-secondary-text: #ffffff; --tc-accent: #06b6d4; --tc-accent-hover: #0891b2; --tc-admin: #0369a1; --tc-admin-hover: #075985; --tc-link: #0e7490; --tc-shadow: 0 4px 20px rgba(6,90,140,0.10); --tc-glow: 0 0 22px rgba(34,211,238,0.18); --tc-table-header: #e0f2fe; --tc-table-row: #ffffff; --tc-table-row-hover: rgba(6,182,212,0.08); --tc-input-bg: #ffffff; --tc-input-border: #bae6fd; --tc-input-text: #0c2540; --tc-modal-bg: #ffffff; --tc-modal-border: #bae6fd; --tc-focus-ring: 0 0 0 3px rgba(8,145,178,0.40); --tc-progress-bg: #e0f2fe; --tc-progress-fill: linear-gradient(90deg, #0891b2, #38bdf8); --tc-badge-bg: rgba(8,145,178,0.14); --tc-badge-text: #0c4a6e; } /* ============================================================================ * DEFAULT STUDY — balanced learning/work * ========================================================================== */ [data-theme-id="defaultStudy"][data-theme-mode="dark"] { --tc-bg: #0f172a; --tc-bg-muted: #1e293b; --tc-bg-elevated: #283142; --tc-sidebar-bg: rgba(20,28,46,0.82); --tc-sidebar-active: rgba(59,130,246,0.20); --tc-sidebar-hover: rgba(59,130,246,0.10); --tc-header-bg: rgba(15,23,42,0.85); --tc-card-bg: #1e293b; --tc-card-glass: rgba(40,54,82,0.55); --tc-card-hover: rgba(96,165,250,0.06); --tc-border: #334155; --tc-border-strong: #475569; --tc-text: #e2e8f0; --tc-text-muted: #94a3b8; --tc-text-soft: #64748b; --tc-primary: #3b82f6; --tc-primary-hover: #2563eb; --tc-primary-text: #ffffff; --tc-secondary: #64748b; --tc-secondary-hover: #475569; --tc-secondary-text: #ffffff; --tc-accent: #60a5fa; --tc-accent-hover: #3b82f6; --tc-admin: #8b5cf6; --tc-admin-hover: #7c3aed; --tc-link: #93c5fd; --tc-shadow: 0 4px 20px rgba(0,0,0,0.40); --tc-glow: 0 0 24px rgba(59,130,246,0.20); --tc-table-header: #283142; --tc-table-row: #1e293b; --tc-table-row-hover: rgba(59,130,246,0.10); --tc-input-bg: #131c2f; --tc-input-border: #334155; --tc-input-text: #e2e8f0; --tc-modal-bg: #283142; --tc-modal-border: #334155; --tc-focus-ring: 0 0 0 3px rgba(59,130,246,0.50); --tc-progress-bg: #283142; --tc-progress-fill: linear-gradient(90deg, #3b82f6, #60a5fa); --tc-badge-bg: rgba(59,130,246,0.20); --tc-badge-text: #dbeafe; } [data-theme-id="defaultStudy"][data-theme-mode="light"] { --tc-bg: #f8fafc; --tc-bg-muted: #eef2f7; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: rgba(255,255,255,0.95); --tc-sidebar-active: rgba(59,130,246,0.14); --tc-sidebar-hover: rgba(59,130,246,0.06); --tc-header-bg: rgba(255,255,255,0.92); --tc-card-bg: #ffffff; --tc-card-glass: rgba(248,250,252,0.88); --tc-card-hover: rgba(59,130,246,0.05); --tc-border: #e2e8f0; --tc-border-strong: #cbd5e1; --tc-text: #0f172a; --tc-text-muted: #475569; --tc-text-soft: #64748b; --tc-primary: #2563eb; --tc-primary-hover: #1d4ed8; --tc-primary-text: #ffffff; --tc-secondary: #64748b; --tc-secondary-hover: #475569; --tc-secondary-text: #ffffff; --tc-accent: #3b82f6; --tc-accent-hover: #2563eb; --tc-admin: #7c3aed; --tc-admin-hover: #6d28d9; --tc-link: #2563eb; --tc-shadow: 0 4px 16px rgba(15,23,42,0.08); --tc-glow: 0 0 18px rgba(59,130,246,0.16); --tc-table-header: #eef2f7; --tc-table-row: #ffffff; --tc-table-row-hover: rgba(59,130,246,0.06); --tc-input-bg: #ffffff; --tc-input-border: #cbd5e1; --tc-input-text: #0f172a; --tc-modal-bg: #ffffff; --tc-modal-border: #e2e8f0; --tc-focus-ring: 0 0 0 3px rgba(37,99,235,0.40); --tc-progress-bg: #eef2f7; --tc-progress-fill: linear-gradient(90deg, #2563eb, #60a5fa); --tc-badge-bg: rgba(37,99,235,0.12); --tc-badge-text: #1e3a8a; } /* ============================================================================ * FOCUS BLUE — concentration / dashboards * ========================================================================== */ [data-theme-id="focusBlue"][data-theme-mode="dark"] { --tc-bg: #050a1a; --tc-bg-muted: #0a142e; --tc-bg-elevated: #11214a; --tc-sidebar-bg: rgba(14,28,68,0.82); --tc-sidebar-active: rgba(96,165,250,0.22); --tc-sidebar-hover: rgba(96,165,250,0.10); --tc-header-bg: rgba(8,16,40,0.85); --tc-card-bg: #0d1c3e; --tc-card-glass: rgba(24,42,90,0.65); --tc-card-hover: rgba(96,165,250,0.07); --tc-border: #1e3a8a; --tc-border-strong: #2563eb; --tc-text: #dbeafe; --tc-text-muted: #93c5fd; --tc-text-soft: #60a5fa; --tc-primary: #3b82f6; --tc-primary-hover: #2563eb; --tc-primary-text: #ffffff; --tc-secondary: #0ea5e9; --tc-secondary-hover: #0284c7; --tc-secondary-text: #ffffff; --tc-accent: #60a5fa; --tc-accent-hover: #3b82f6; --tc-admin: #6366f1; --tc-admin-hover: #4f46e5; --tc-link: #93c5fd; --tc-shadow: 0 4px 24px rgba(0,20,80,0.55); --tc-glow: 0 0 30px rgba(59,130,246,0.30); --tc-table-header: #11214a; --tc-table-row: #0d1c3e; --tc-table-row-hover: rgba(59,130,246,0.12); --tc-input-bg: #07112a; --tc-input-border: #1e3a8a; --tc-input-text: #dbeafe; --tc-modal-bg: #11214a; --tc-modal-border: #1e3a8a; --tc-focus-ring: 0 0 0 3px rgba(96,165,250,0.55); --tc-progress-bg: #11214a; --tc-progress-fill: linear-gradient(90deg, #3b82f6, #60a5fa); --tc-badge-bg: rgba(59,130,246,0.20); --tc-badge-text: #dbeafe; } [data-theme-id="focusBlue"][data-theme-mode="light"] { --tc-bg: #eff6ff; --tc-bg-muted: #dbeafe; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: rgba(255,255,255,0.94); --tc-sidebar-active: rgba(37,99,235,0.16); --tc-sidebar-hover: rgba(37,99,235,0.07); --tc-header-bg: rgba(255,255,255,0.92); --tc-card-bg: #ffffff; --tc-card-glass: rgba(239,246,255,0.85); --tc-card-hover: rgba(37,99,235,0.06); --tc-border: #bfdbfe; --tc-border-strong: #60a5fa; --tc-text: #0c2046; --tc-text-muted: #1e3a8a; --tc-text-soft: #475569; --tc-primary: #2563eb; --tc-primary-hover: #1d4ed8; --tc-primary-text: #ffffff; --tc-secondary: #0284c7; --tc-secondary-hover: #0369a1; --tc-secondary-text: #ffffff; --tc-accent: #3b82f6; --tc-accent-hover: #2563eb; --tc-admin: #4f46e5; --tc-admin-hover: #4338ca; --tc-link: #1d4ed8; --tc-shadow: 0 4px 20px rgba(30,58,138,0.10); --tc-glow: 0 0 22px rgba(59,130,246,0.20); --tc-table-header: #dbeafe; --tc-table-row: #ffffff; --tc-table-row-hover: rgba(37,99,235,0.07); --tc-input-bg: #ffffff; --tc-input-border: #bfdbfe; --tc-input-text: #0c2046; --tc-modal-bg: #ffffff; --tc-modal-border: #bfdbfe; --tc-focus-ring: 0 0 0 3px rgba(37,99,235,0.40); --tc-progress-bg: #dbeafe; --tc-progress-fill: linear-gradient(90deg, #2563eb, #60a5fa); --tc-badge-bg: rgba(37,99,235,0.12); --tc-badge-text: #1e3a8a; } /* ============================================================================ * STUDY GREEN — long reading * ========================================================================== */ [data-theme-id="studyGreen"][data-theme-mode="dark"] { --tc-bg: #0c1410; --tc-bg-muted: #14201a; --tc-bg-elevated: #1d2e25; --tc-sidebar-bg: rgba(22,38,30,0.82); --tc-sidebar-active: rgba(74,222,128,0.18); --tc-sidebar-hover: rgba(74,222,128,0.08); --tc-header-bg: rgba(12,20,16,0.85); --tc-card-bg: #182921; --tc-card-glass: rgba(32,50,40,0.62); --tc-card-hover: rgba(110,231,183,0.06); --tc-border: #2a4034; --tc-border-strong: #15803d; --tc-text: #d6f5dd; --tc-text-muted: #86efac; --tc-text-soft: #4e785f; --tc-primary: #10b981; --tc-primary-hover: #059669; --tc-primary-text: #04140a; --tc-secondary: #16a34a; --tc-secondary-hover: #15803d; --tc-secondary-text: #ffffff; --tc-accent: #6ee7b7; --tc-accent-hover: #34d399; --tc-admin: #15803d; --tc-admin-hover: #166534; --tc-link: #86efac; --tc-shadow: 0 4px 22px rgba(0,30,15,0.50); --tc-glow: 0 0 26px rgba(16,185,129,0.25); --tc-table-header: #1f3327; --tc-table-row: #182921; --tc-table-row-hover: rgba(16,185,129,0.10); --tc-input-bg: #0f1c14; --tc-input-border: #2a4034; --tc-input-text: #d6f5dd; --tc-modal-bg: #1d2e25; --tc-modal-border: #2a4034; --tc-focus-ring: 0 0 0 3px rgba(52,211,153,0.50); --tc-progress-bg: #1f3327; --tc-progress-fill: linear-gradient(90deg, #10b981, #6ee7b7); --tc-badge-bg: rgba(16,185,129,0.18); --tc-badge-text: #d6f5dd; } [data-theme-id="studyGreen"][data-theme-mode="light"] { --tc-bg: #f5faf6; --tc-bg-muted: #e7f3eb; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: rgba(255,255,255,0.94); --tc-sidebar-active: rgba(22,163,74,0.14); --tc-sidebar-hover: rgba(22,163,74,0.06); --tc-header-bg: rgba(255,255,255,0.92); --tc-card-bg: #ffffff; --tc-card-glass: rgba(245,250,246,0.88); --tc-card-hover: rgba(22,163,74,0.06); --tc-border: #c8e1d2; --tc-border-strong: #86efac; --tc-text: #1a3a23; --tc-text-muted: #15803d; --tc-text-soft: #4e785f; --tc-primary: #16a34a; --tc-primary-hover: #15803d; --tc-primary-text: #ffffff; --tc-secondary: #059669; --tc-secondary-hover: #047857; --tc-secondary-text: #ffffff; --tc-accent: #34d399; --tc-accent-hover: #10b981; --tc-admin: #166534; --tc-admin-hover: #14532d; --tc-link: #15803d; --tc-shadow: 0 4px 18px rgba(20,80,40,0.10); --tc-glow: 0 0 20px rgba(34,197,94,0.20); --tc-table-header: #e7f3eb; --tc-table-row: #ffffff; --tc-table-row-hover: rgba(22,163,74,0.07); --tc-input-bg: #ffffff; --tc-input-border: #c8e1d2; --tc-input-text: #1a3a23; --tc-modal-bg: #ffffff; --tc-modal-border: #c8e1d2; --tc-focus-ring: 0 0 0 3px rgba(22,163,74,0.40); --tc-progress-bg: #e7f3eb; --tc-progress-fill: linear-gradient(90deg, #16a34a, #6ee7b7); --tc-badge-bg: rgba(22,163,74,0.12); --tc-badge-text: #14532d; } /* ============================================================================ * CALM TEAL — focus / relaxation * ========================================================================== */ [data-theme-id="calmTeal"][data-theme-mode="dark"] { --tc-bg: #0a1414; --tc-bg-muted: #102222; --tc-bg-elevated: #173030; --tc-sidebar-bg: rgba(18,40,40,0.80); --tc-sidebar-active: rgba(45,212,191,0.20); --tc-sidebar-hover: rgba(45,212,191,0.10); --tc-header-bg: rgba(10,20,20,0.85); --tc-card-bg: #142b2b; --tc-card-glass: rgba(28,56,56,0.58); --tc-card-hover: rgba(94,234,212,0.06); --tc-border: #245252; --tc-border-strong: #0d9488; --tc-text: #ccfbf1; --tc-text-muted: #5eead4; --tc-text-soft: #4d7a78; --tc-primary: #14b8a6; --tc-primary-hover: #0d9488; --tc-primary-text: #02141a; --tc-secondary: #06b6d4; --tc-secondary-hover: #0891b2; --tc-secondary-text: #ffffff; --tc-accent: #2dd4bf; --tc-accent-hover: #14b8a6; --tc-admin: #0e7490; --tc-admin-hover: #155e75; --tc-link: #5eead4; --tc-shadow: 0 4px 22px rgba(0,40,40,0.50); --tc-glow: 0 0 26px rgba(20,184,166,0.25); --tc-table-header: #173838; --tc-table-row: #142b2b; --tc-table-row-hover: rgba(20,184,166,0.10); --tc-input-bg: #0e1f1f; --tc-input-border: #245252; --tc-input-text: #ccfbf1; --tc-modal-bg: #173030; --tc-modal-border: #245252; --tc-focus-ring: 0 0 0 3px rgba(45,212,191,0.50); --tc-progress-bg: #173838; --tc-progress-fill: linear-gradient(90deg, #14b8a6, #2dd4bf); --tc-badge-bg: rgba(20,184,166,0.20); --tc-badge-text: #ccfbf1; } [data-theme-id="calmTeal"][data-theme-mode="light"] { --tc-bg: #f0fdfa; --tc-bg-muted: #ccfbf1; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: rgba(255,255,255,0.94); --tc-sidebar-active: rgba(20,184,166,0.14); --tc-sidebar-hover: rgba(20,184,166,0.06); --tc-header-bg: rgba(255,255,255,0.92); --tc-card-bg: #ffffff; --tc-card-glass: rgba(240,253,250,0.85); --tc-card-hover: rgba(20,184,166,0.06); --tc-border: #99f6e4; --tc-border-strong: #5eead4; --tc-text: #0f3a37; --tc-text-muted: #0f766e; --tc-text-soft: #4d7a78; --tc-primary: #0d9488; --tc-primary-hover: #0f766e; --tc-primary-text: #ffffff; --tc-secondary: #0891b2; --tc-secondary-hover: #0e7490; --tc-secondary-text: #ffffff; --tc-accent: #14b8a6; --tc-accent-hover: #0d9488; --tc-admin: #155e75; --tc-admin-hover: #164e63; --tc-link: #0f766e; --tc-shadow: 0 4px 18px rgba(15,80,80,0.10); --tc-glow: 0 0 20px rgba(20,184,166,0.20); --tc-table-header: #ccfbf1; --tc-table-row: #ffffff; --tc-table-row-hover: rgba(20,184,166,0.07); --tc-input-bg: #ffffff; --tc-input-border: #99f6e4; --tc-input-text: #0f3a37; --tc-modal-bg: #ffffff; --tc-modal-border: #99f6e4; --tc-focus-ring: 0 0 0 3px rgba(13,148,136,0.40); --tc-progress-bg: #ccfbf1; --tc-progress-fill: linear-gradient(90deg, #0d9488, #5eead4); --tc-badge-bg: rgba(13,148,136,0.12); --tc-badge-text: #134e4a; } /* ============================================================================ * WARM SEPIA — reading / evening study * ========================================================================== */ [data-theme-id="warmSepia"][data-theme-mode="dark"] { --tc-bg: #1a120c; --tc-bg-muted: #261c14; --tc-bg-elevated: #34281c; --tc-sidebar-bg: rgba(40,28,18,0.82); --tc-sidebar-active: rgba(217,119,6,0.18); --tc-sidebar-hover: rgba(217,119,6,0.08); --tc-header-bg: rgba(20,14,8,0.85); --tc-card-bg: #2a1f15; --tc-card-glass: rgba(58,42,28,0.65); --tc-card-hover: rgba(252,211,77,0.06); --tc-border: #4a382a; --tc-border-strong: #92400e; --tc-text: #f4ead7; --tc-text-muted: #d4b896; --tc-text-soft: #8a7560; --tc-primary: #d97706; --tc-primary-hover: #b45309; --tc-primary-text: #1a0e02; --tc-secondary: #b45309; --tc-secondary-hover: #92400e; --tc-secondary-text: #ffffff; --tc-accent: #fbbf24; --tc-accent-hover: #d97706; --tc-admin: #b45309; --tc-admin-hover: #92400e; --tc-link: #fbbf24; --tc-shadow: 0 4px 22px rgba(70,40,10,0.55); --tc-glow: 0 0 26px rgba(217,119,6,0.25); --tc-table-header: #3a2818; --tc-table-row: #2a1f15; --tc-table-row-hover: rgba(217,119,6,0.10); --tc-input-bg: #1f1610; --tc-input-border: #4a382a; --tc-input-text: #f4ead7; --tc-modal-bg: #34281c; --tc-modal-border: #4a382a; --tc-focus-ring: 0 0 0 3px rgba(217,119,6,0.50); --tc-progress-bg: #3a2818; --tc-progress-fill: linear-gradient(90deg, #d97706, #fbbf24); --tc-badge-bg: rgba(217,119,6,0.20); --tc-badge-text: #f4ead7; } [data-theme-id="warmSepia"][data-theme-mode="light"] { --tc-bg: #faf3e3; --tc-bg-muted: #f0e3c8; --tc-bg-elevated: #fffaef; --tc-sidebar-bg: rgba(253,247,232,0.95); --tc-sidebar-active: rgba(180,83,9,0.14); --tc-sidebar-hover: rgba(180,83,9,0.06); --tc-header-bg: rgba(253,247,232,0.92); --tc-card-bg: #fffaef; --tc-card-glass: rgba(250,243,227,0.92); --tc-card-hover: rgba(180,83,9,0.06); --tc-border: #e8d6a8; --tc-border-strong: #d97706; --tc-text: #3a200a; --tc-text-muted: #7c4a1d; --tc-text-soft: #a0784b; --tc-primary: #b45309; --tc-primary-hover: #92400e; --tc-primary-text: #ffffff; --tc-secondary: #a16207; --tc-secondary-hover: #854d0e; --tc-secondary-text: #ffffff; --tc-accent: #d97706; --tc-accent-hover: #b45309; --tc-admin: #854d0e; --tc-admin-hover: #713f12; --tc-link: #b45309; --tc-shadow: 0 4px 18px rgba(120,60,10,0.12); --tc-glow: 0 0 20px rgba(217,119,6,0.18); --tc-table-header: #f0e3c8; --tc-table-row: #fffaef; --tc-table-row-hover: rgba(180,83,9,0.07); --tc-input-bg: #fffaef; --tc-input-border: #e8d6a8; --tc-input-text: #3a200a; --tc-modal-bg: #fffaef; --tc-modal-border: #e8d6a8; --tc-focus-ring: 0 0 0 3px rgba(180,83,9,0.40); --tc-progress-bg: #f0e3c8; --tc-progress-fill: linear-gradient(90deg, #b45309, #fbbf24); --tc-badge-bg: rgba(180,83,9,0.14); --tc-badge-text: #7c2d12; } /* ============================================================================ * HIGH CONTRAST — accessibility-first * ========================================================================== */ [data-theme-id="highContrast"][data-theme-mode="dark"] { --tc-bg: #000000; --tc-bg-muted: #0a0a0a; --tc-bg-elevated: #1a1a1a; --tc-sidebar-bg: #050505; --tc-sidebar-active: #ffffff; --tc-sidebar-hover: #2a2a2a; --tc-header-bg: #000000; --tc-card-bg: #1a1a1a; --tc-card-glass: #1a1a1a; --tc-card-hover: #2a2a2a; --tc-border: #d4d4d4; --tc-border-strong: #ffffff; --tc-text: #ffffff; --tc-text-muted: #e5e5e5; --tc-text-soft: #d4d4d4; --tc-primary: #38bdf8; --tc-primary-hover: #0ea5e9; --tc-primary-text: #000000; --tc-secondary: #facc15; --tc-secondary-hover: #eab308; --tc-secondary-text: #000000; --tc-accent: #38bdf8; --tc-accent-hover: #0ea5e9; --tc-admin: #facc15; --tc-admin-hover: #eab308; --tc-success: #4ade80; --tc-warning: #facc15; --tc-danger: #f87171; --tc-info: #38bdf8; --tc-link: #38bdf8; --tc-shadow: 0 0 0 0 transparent; --tc-glow: 0 0 0 0 transparent; --tc-table-header: #2a2a2a; --tc-table-row: #1a1a1a; --tc-table-row-hover: #333333; --tc-input-bg: #000000; --tc-input-border: #ffffff; --tc-input-text: #ffffff; --tc-modal-bg: #000000; --tc-modal-border: #ffffff; --tc-focus-ring: 0 0 0 4px #facc15; --tc-progress-bg: #2a2a2a; --tc-progress-fill: #38bdf8; --tc-badge-bg: #ffffff; --tc-badge-text: #000000; } [data-theme-id="highContrast"][data-theme-mode="light"] { --tc-bg: #ffffff; --tc-bg-muted: #f5f5f5; --tc-bg-elevated: #ffffff; --tc-sidebar-bg: #ffffff; --tc-sidebar-active: #000000; --tc-sidebar-hover: #e5e5e5; --tc-header-bg: #ffffff; --tc-card-bg: #ffffff; --tc-card-glass: #ffffff; --tc-card-hover: #f0f0f0; --tc-border: #000000; --tc-border-strong: #000000; --tc-text: #000000; --tc-text-muted: #1a1a1a; --tc-text-soft: #404040; --tc-primary: #1d4ed8; --tc-primary-hover: #1e3a8a; --tc-primary-text: #ffffff; --tc-secondary: #b91c1c; --tc-secondary-hover: #991b1b; --tc-secondary-text: #ffffff; --tc-accent: #1d4ed8; --tc-accent-hover: #1e3a8a; --tc-admin: #b91c1c; --tc-admin-hover: #991b1b; --tc-success: #15803d; --tc-warning: #ca8a04; --tc-danger: #b91c1c; --tc-info: #1d4ed8; --tc-link: #1d4ed8; --tc-shadow: 0 0 0 0 transparent; --tc-glow: 0 0 0 0 transparent; --tc-table-header: #f5f5f5; --tc-table-row: #ffffff; --tc-table-row-hover: #f0f0f0; --tc-input-bg: #ffffff; --tc-input-border: #000000; --tc-input-text: #000000; --tc-modal-bg: #ffffff; --tc-modal-border: #000000; --tc-focus-ring: 0 0 0 4px #b91c1c; --tc-progress-bg: #f5f5f5; --tc-progress-fill: #1d4ed8; --tc-badge-bg: #000000; --tc-badge-text: #ffffff; } /* ============================================================================ * Cross-theme global surface adoption * These rules apply the theme tokens to broad surfaces so a new theme is * visible app-wide without rewriting every component. Components that need * finer control can override locally. * ========================================================================== */ html, body { background: var(--tc-bg); color: var(--tc-text); transition: background-color 0.25s ease, color 0.25s ease; } .page-section, .main-content, .creator-area, .ts-card, .sec-panel { color: var(--tc-text); } .sidebar, .sidebar-nav { background: var(--tc-sidebar-bg); color: var(--tc-text); } .nav-item.active, .nav-item-child.active { background: var(--tc-sidebar-active) !important; color: var(--tc-text) !important; } .nav-item:hover, .nav-item-child:hover { background: var(--tc-sidebar-hover); } .top-bar { background: var(--tc-header-bg); border-bottom-color: var(--tc-border); } .card-panel, .ts-card, .sec-panel { background: var(--tc-card-bg); border-color: var(--tc-border); color: var(--tc-text); } input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], textarea, select { background: var(--tc-input-bg) !important; border-color: var(--tc-input-border) !important; color: var(--tc-input-text) !important; } input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--tc-focus-ring) !important; } .btn-primary, .ts-btn-primary { background: var(--tc-primary); color: var(--tc-primary-text); border-color: var(--tc-primary); } .btn-primary:hover, .ts-btn-primary:hover { background: var(--tc-primary-hover); border-color: var(--tc-primary-hover); } .btn-secondary, .ts-btn-secondary { border-color: var(--tc-border-strong); color: var(--tc-text); } table thead th { background: var(--tc-table-header); color: var(--tc-text); } table tbody tr:hover { background: var(--tc-table-row-hover); } .progress-bar, progress { background: var(--tc-progress-bg); } .progress-bar > .fill, progress::-webkit-progress-value { background: var(--tc-progress-fill); } a { color: var(--tc-link); } .badge { background: var(--tc-badge-bg); color: var(--tc-badge-text); }