/* ========================================================================== TestBuddy — Theme System (design preview only) -------------------------------------------------------------------------- Three complete palette options. Switch with data-theme="option-a|b|c" on the element. No theme attribute = Option A (Festive Pop). Token contract (every option defines ALL of these): --background page background --surface / --surface-2 cards --text body text (≥4.5:1 on bg) --muted secondary text (≥4.5:1) --line borders/dividers --primary / --primary-dark main brand --on-primary text on primary fills --accent decorative pops --accent-ink accent-coloured text --accent-soft tinted accent background --on-accent text on accent fills --highlight warm/bright highlights --highlight-ink / --highlight-soft --success / --success-strong / --success-soft / --on-success --warning / --warning-soft / --on-warning --danger / --danger-soft / --on-danger --grad-hero / --grad-btn / --grad-accent gradient pairs for heroes/buttons --on-hero text on the hero gradient --shadow card shadow (tinted per theme) Fonts: --font-display (Baloo 2), --font-body (Mukta) — both Devanagari-safe. ========================================================================== */ /* ---------------- Option A · "Festive Pop" ---------------- Warm Indian festive energy: deep teal + coral + marigold on warm cream. Rationale: festive colours Indian parents already trust (weddings, Diwali), teal reads "education" without the generic blue-white SaaS look. */ :root, html[data-theme="option-a"]{ --background:#FFF7E9; --surface:#FFFFFF; --surface-2:#FFF0D4; --text:#27303B; --muted:#67707D; --line:#EAD9BC; --primary:#0F7B74; --primary-dark:#0B5F5B; --on-primary:#FFFFFF; --accent:#FF6B57; --accent-ink:#C93A2B; --accent-soft:#FFE4DC; --on-accent:#27303B; --highlight:#F5A81C; --highlight-ink:#8A5A00; --highlight-soft:#FBEFC9; --success:#1E9E6A; --success-strong:#0F7B4D; --success-soft:#E0F5E9; --on-success:#FFFFFF; --warning:#B45309; --warning-soft:#FDEBD2; --on-warning:#FFFFFF; --danger:#D13A3F; --danger-soft:#FBE3E3; --on-danger:#FFFFFF; --grad-hero:radial-gradient(120% 130% at 15% 0%, #12857D 0%, #0B5F5B 58%, #083F3B 100%); --grad-btn:linear-gradient(135deg,#0F7B74 0%,#0B5F5B 100%); --grad-accent:linear-gradient(135deg,#FF6B57 0%,#F5A81C 100%); --on-hero:#FFFFFF; --shadow:0 18px 50px rgba(96,72,20,.13); --ring:#0F7B74; } /* ---------------- Option B · "Bold Play" ---------------- Vivid violet + hot pink + amber. Rationale: maximum kid magnetism on a phone screen (the Duolingo energy), while deep violet keeps the "serious exam prep" credibility parents need before paying. */ html[data-theme="option-b"]{ --background:#F7F4FF; --surface:#FFFFFF; --surface-2:#EFE7FF; --text:#241B4A; --muted:#6F6589; --line:#E1D7F8; --primary:#7C3AED; --primary-dark:#6D28D9; --on-primary:#FFFFFF; --accent:#EC4899; --accent-ink:#B51F6E; --accent-soft:#FBDCEB; --on-accent:#1A1038; --highlight:#FBBF24; --highlight-ink:#8A5600; --highlight-soft:#FEF0C6; --success:#12A56B; --success-strong:#0B7A4E; --success-soft:#DCF5E7; --on-success:#FFFFFF; --warning:#B45309; --warning-soft:#FDEBD2; --on-warning:#FFFFFF; --danger:#D13A3F; --danger-soft:#FBE3E3; --on-danger:#FFFFFF; --grad-hero:radial-gradient(120% 130% at 85% 0%, #8B5CF6 0%, #5B21B6 55%, #3B1470 100%); --grad-btn:linear-gradient(135deg,#7C3AED 0%,#6D28D9 100%); --grad-accent:linear-gradient(135deg,#EC4899 0%,#FBBF24 100%); --on-hero:#FFFFFF; --shadow:0 18px 50px rgba(59,20,112,.15); --ring:#7C3AED; } /* ---------------- Option C · "Night Mode" ---------------- Deep indigo near-black with neon marigold + mint. Rationale: students revise late at night on phones — a true dark theme is easier on eyes, and the neon pairing makes TestBuddy unmistakable next to every white-background competitor. Buttons use dark text on neon fills. */ html[data-theme="option-c"]{ --background:#0F1030; --surface:#1C1D45; --surface-2:#282A5E; --text:#F5F3FF; --muted:#A9A3CF; --line:#35376E; --primary:#4FE3B0; --primary-dark:#35C795; --on-primary:#0F1030; --accent:#FFC93C; --accent-ink:#FFC93C; --accent-soft:#3A2F10; --on-accent:#0F1030; --highlight:#B48CFF; --highlight-ink:#D9CCFF; --highlight-soft:#2C2454; --success:#34D399; --success-strong:#34D399; --success-soft:#123B2C; --on-success:#0F1030; --warning:#FBBF24; --warning-soft:#3A2C08; --on-warning:#0F1030; --danger:#FF7B7B; --danger-soft:#3D1A24; --on-danger:#201012; --grad-hero:radial-gradient(120% 130% at 80% 0%, #2A1B6E 0%, #14153A 58%, #0F1030 100%); --grad-btn:linear-gradient(135deg,#4FE3B0 0%,#35C795 100%); --grad-accent:linear-gradient(135deg,#FFC93C 0%,#FF8A3C 100%); --on-hero:#F5F3FF; --shadow:0 18px 50px rgba(0,0,0,.5); --ring:#4FE3B0; } /* ---------------- Shared tokens ---------------- */ :root{ --font-display:"Baloo 2","Mukta",system-ui,-apple-system,"Segoe UI",sans-serif; --font-body:"Mukta","Baloo 2",system-ui,-apple-system,"Segoe UI",sans-serif; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px; --ease:cubic-bezier(.22,.9,.28,1.2); } /* ---------------- Bake-in map (for README / live site) ---------------- When the winning theme is chosen, the live pages' existing variables remap like this (add themes.css , set data-theme on , then swap the old :root values): --green / --green2 -> --primary / --primary-dark (btn-primary, brand-mark, chip.active, plan-flag, plan-card.featured border, pdot.answered, opt-letter, topic-chip, step .num, .tick) --red -> --danger (quiz-clock.urgent, review .bad, orbit dots) --yellow -> --highlight (topline segment, stat-num, sample-tag/banner, testmode) --mint -> --success-soft (privacy-chip) --paper -> --background (body, chip, review-item, chapter-row, draw-summary) --white -> --surface (cards, nav surfaces) --ink -> --text (btn-submit, seg.active, cycle-toggle .sel, compare th, support section bg, footer bg) --muted -> --muted (secondary copy everywhere) --line -> --line (borders) Fonts: DM Sans -> Mukta (body), Newsreader -> Baloo 2 (display). Gradients: .topline and .btn-primary can take var(--grad-accent) / var(--grad-btn); hero panels take var(--grad-hero) with var(--on-hero). */