/* JacAI Trainer Pro — Themes Uses CSS variables + [data-theme] attribute on . */ :root{ --radius-xl: 18px; --radius-lg: 14px; --radius-md: 12px; --radius-sm: 10px; --shadow-1: 0 10px 30px rgba(0,0,0,.14); --shadow-2: 0 18px 60px rgba(0,0,0,.22); --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; --ring: 0 0 0 4px rgba(56,189,248,.18); --ring-strong: 0 0 0 4px rgba(34,197,94,.16); --glow: 0 0 24px rgba(99,102,241,.20); --dur: 180ms; } /* LIGHT */ html[data-theme="light"]{ --bg: #f6f7fb; --panel: rgba(255,255,255,.82); --panel-2: rgba(255,255,255,.62); --card: #ffffff; --text: #0b1220; --muted: rgba(11,18,32,.68); --border: rgba(11,18,32,.12); --primary: #4f46e5; --primary-2: #7c3aed; --accent: #06b6d4; --good: #16a34a; --warn: #f59e0b; --bad: #ef4444; --chip: rgba(79,70,229,.08); --chipText: rgba(79,70,229,.92); --codeBg: #0b1020; --codeText: #e6eefc; } /* DARK */ html[data-theme="dark"]{ --bg: #070a14; --panel: rgba(15,23,42,.78); --panel-2: rgba(15,23,42,.58); --card: rgba(2,6,23,.72); --text: #e7eefc; --muted: rgba(231,238,252,.68); --border: rgba(231,238,252,.12); --primary: #60a5fa; --primary-2: #a78bfa; --accent: #22d3ee; --good: #22c55e; --warn: #fbbf24; --bad: #fb7185; --chip: rgba(96,165,250,.12); --chipText: rgba(191,219,254,.92); --codeBg: #020617; --codeText: #dbeafe; } /* NEUTRAL (warm grey) */ html[data-theme="neutral"]{ --bg: #0e0f12; --panel: rgba(23,23,23,.72); --panel-2: rgba(23,23,23,.52); --card: rgba(14,15,18,.72); --text: #f3f4f6; --muted: rgba(243,244,246,.68); --border: rgba(243,244,246,.12); --primary: #a3a3a3; --primary-2: #60a5fa; --accent: #22c55e; --good: #22c55e; --warn: #f59e0b; --bad: #ef4444; --chip: rgba(163,163,163,.12); --chipText: rgba(229,231,235,.92); --codeBg: #0a0a0a; --codeText: #e5e7eb; } /* Respect system pref only when theme is "system" */ @media (prefers-color-scheme: dark){ html[data-theme="system"]{ --bg: #070a14; --panel: rgba(15,23,42,.78); --panel-2: rgba(15,23,42,.58); --card: rgba(2,6,23,.72); --text: #e7eefc; --muted: rgba(231,238,252,.68); --border: rgba(231,238,252,.12); --primary: #60a5fa; --primary-2: #a78bfa; --accent: #22d3ee; --good: #22c55e; --warn: #fbbf24; --bad: #fb7185; --chip: rgba(96,165,250,.12); --chipText: rgba(191,219,254,.92); --codeBg: #020617; --codeText: #dbeafe; } } @media (prefers-color-scheme: light){ html[data-theme="system"]{ --bg: #f6f7fb; --panel: rgba(255,255,255,.82); --panel-2: rgba(255,255,255,.62); --card: #ffffff; --text: #0b1220; --muted: rgba(11,18,32,.68); --border: rgba(11,18,32,.12); --primary: #4f46e5; --primary-2: #7c3aed; --accent: #06b6d4; --good: #16a34a; --warn: #f59e0b; --bad: #ef4444; --chip: rgba(79,70,229,.08); --chipText: rgba(79,70,229,.92); --codeBg: #0b1020; --codeText: #e6eefc; } }