/*
 * Clearli — platform-wide design tokens
 * Visual layer only; maps into existing elite.css variable consumption.
 */

body.elite-body {
    /* Brand palette */
    --clearli-navy: #072b6e;
    --clearli-blue: #4b83ff;
    --clearli-blue-soft: #7cc7ff;
    --clearli-mint: #67d8c8;
    --clearli-rose: #d35a88;
    --clearli-orange: #f47a2a;
    --clearli-purple: #9e7df4;

    /* Semantic tokens — light */
    --bg-base: #fffdf8;
    --bg-gradient: linear-gradient(180deg, #fffdf8 0%, #f8f1e8 42%, rgba(124, 199, 255, 0.08) 100%);
    --surface-page: var(--bg-base);
    --surface-card: rgba(255, 255, 255, 0.74);
    --surface-card-hover: rgba(255, 255, 255, 0.88);
    --surface-card-active: rgba(255, 255, 255, 0.94);
    --surface-modal: rgba(255, 253, 248, 0.96);
    --border-soft: rgba(7, 43, 110, 0.09);
    --border-accent: rgba(75, 131, 255, 0.22);
    --text-primary: #1a2332;
    --text-secondary: rgba(26, 35, 50, 0.72);
    --text-muted: rgba(26, 35, 50, 0.52);
    --accent-blue: var(--clearli-blue);
    --accent-mint: var(--clearli-mint);
    --accent-rose: var(--clearli-rose);
    --accent-orange: var(--clearli-orange);
    --accent-purple: var(--clearli-purple);
    --shadow-soft: 0 1px 2px rgba(7, 43, 110, 0.04), 0 8px 28px rgba(7, 43, 110, 0.06);
    --shadow-card: 0 2px 4px rgba(7, 43, 110, 0.05), 0 14px 40px rgba(7, 43, 110, 0.08);
    --glow-soft: 0 0 24px rgba(75, 131, 255, 0.08);
    --focus-ring: 0 0 0 3px rgba(75, 131, 255, 0.22);
    --radius-card: 18px;
    --radius-button: 999px;
    --transition-theme: 320ms cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Glass & motion */
    --clearli-glass-blur: 20px;
    --clearli-glass-saturate: 168%;
    --clearli-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --clearli-theme-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --clearli-theme-duration: var(--transition-theme);

    /* Remap elite.css tokens */
    --bg: var(--bg-base);
    --bg-soft: #f8f1e8;
    --card: var(--surface-card);
    --card-solid: #fffdf8;
    --ink: var(--text-primary);
    --ink-soft: var(--text-secondary);
    --ink-muted: var(--text-muted);
    --border: var(--border-soft);
    --border-strong: var(--border-accent);
    --shadow-sm: var(--shadow-soft);
    --shadow-md: var(--shadow-card);
    --shadow-lg: 0 16px 48px rgba(7, 43, 110, 0.1);
    --overlay-bg: var(--surface-modal);
    --subtitle: var(--text-secondary);
    --slate: var(--text-secondary);
    --slate-light: var(--text-muted);
    --blue: var(--accent-blue);
    --blue-bright: #5ea8ff;
    --lav: var(--accent-purple);
    --cyan: var(--clearli-blue-soft);
    --turquoise: var(--accent-mint);
    --sage: var(--accent-mint);
    --pink: var(--accent-rose);
    --orange: var(--accent-orange);
    --royal: var(--accent-blue);
    --royal-light: rgba(75, 131, 255, 0.12);
    --green: var(--accent-mint);
    --green-light: rgba(103, 216, 200, 0.14);
    --teal: var(--accent-mint);
    --teal-light: rgba(103, 216, 200, 0.14);
    --violet: var(--accent-purple);
    --violet-light: rgba(158, 125, 244, 0.16);
    --sky-light: rgba(124, 199, 255, 0.12);
    --sun-light: rgba(244, 122, 42, 0.1);
    --btn-bg: var(--clearli-navy);
    --btn-fg: #fffdf8;
    --badge-bg: rgba(158, 125, 244, 0.12);
    --badge-border: rgba(75, 131, 255, 0.22);
    --badge-ink: #5c56c9;
    --radius-sm: 14px;
    --radius-md: var(--radius-card);
    --radius-lg: 20px;
    --fun-gradient: linear-gradient(135deg, #9e7df4 0%, #4b83ff 48%, #67d8c8 100%);
    --progress-gradient: linear-gradient(90deg, #67d8c8 0%, #4b83ff 55%, #7cc7ff 100%);

    /* Background art (global — same as home) */
    --clearli-bg-image: url('../img/clearli-bg-light.png');

    /* Feedback (functional states) */
    --feedback-correct: #22c55e;
    --feedback-correct-soft: rgba(34, 197, 94, 0.14);
    --feedback-wrong: #ef4444;
    --feedback-wrong-soft: rgba(239, 68, 68, 0.12);
    --feedback-warning: #f59e0b;
    --feedback-warning-soft: rgba(245, 158, 11, 0.12);
    --feedback-disabled: #cbd5e1;

    /* Mint text accents (roadmap, learning) */
    --accent-mint-text: #0f766e;
    --accent-mint-soft: rgba(103, 216, 200, 0.14);
    --accent-mint-border: rgba(103, 216, 200, 0.28);
    --accent-blue-soft-bg: rgba(75, 131, 255, 0.08);
}

[data-theme="dark"] body.elite-body,
body[data-theme="dark"].elite-body {
    --bg-base: #07101f;
    --bg-gradient: linear-gradient(180deg, #05070c 0%, #07101f 38%, #0b1530 100%);
    --surface-card: rgba(14, 22, 40, 0.62);
    --surface-card-hover: rgba(18, 28, 50, 0.76);
    --surface-card-active: rgba(22, 34, 58, 0.88);
    --surface-modal: rgba(10, 16, 30, 0.94);
    --border-soft: rgba(255, 255, 255, 0.09);
    --border-accent: rgba(124, 199, 255, 0.24);
    --text-primary: rgba(255, 253, 248, 0.96);
    --text-secondary: rgba(255, 253, 248, 0.74);
    --text-muted: rgba(255, 253, 248, 0.5);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.28), 0 12px 36px rgba(0, 0, 0, 0.22);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.32), 0 18px 44px rgba(0, 0, 0, 0.28);
    --glow-soft: 0 0 32px rgba(75, 131, 255, 0.12);
    --focus-ring: 0 0 0 3px rgba(124, 199, 255, 0.28);
    --clearli-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --bg: var(--bg-base);
    --bg-soft: #0b1530;
    --card: var(--surface-card);
    --card-solid: #121a2e;
    --overlay-bg: var(--surface-modal);
    --royal-light: rgba(75, 131, 255, 0.16);
    --green-light: rgba(103, 216, 200, 0.12);
    --teal-light: rgba(103, 216, 200, 0.12);
    --sky-light: rgba(124, 199, 255, 0.1);
    --btn-bg: #1a2848;
    --badge-bg: rgba(158, 125, 244, 0.16);
    --badge-border: rgba(124, 199, 255, 0.2);
    --badge-ink: #c4b5fd;

    --clearli-bg-image: url('../img/clearli-bg-dark.png');
    --feedback-correct: #4ade80;
    --feedback-correct-soft: rgba(74, 222, 128, 0.14);
    --feedback-wrong: #f87171;
    --feedback-wrong-soft: rgba(248, 113, 113, 0.14);
    --feedback-warning: #fbbf24;
    --feedback-warning-soft: rgba(251, 191, 36, 0.12);
    --feedback-disabled: rgba(255, 255, 255, 0.2);
    --accent-mint-text: #5eead4;
    --accent-mint-soft: rgba(103, 216, 200, 0.12);
    --accent-mint-border: rgba(103, 216, 200, 0.24);
    --accent-blue-soft-bg: rgba(75, 131, 255, 0.14);
}

/* Home-only: greeting gradient tokens */
body.elite-body:has(.home-greeting) {
    --greeting-gradient: linear-gradient(90deg, #8f86f8 0%, #6e8dff 45%, #5ea8ff 100%);
    --greeting-shadow: drop-shadow(0 3px 14px rgba(110, 141, 255, 0.1));
    --greeting-fallback: #6e8dff;
}

[data-theme="dark"] body.elite-body:has(.home-greeting),
body[data-theme="dark"].elite-body:has(.home-greeting) {
    --greeting-gradient: linear-gradient(90deg, #6c7dff 0%, #4d8fff 50%, #55a7ff 100%);
    --greeting-shadow: drop-shadow(0 0 18px rgba(77, 143, 255, 0.18));
    --greeting-fallback: #4d8fff;
}