/* Thème clair : remplace les jetons et quelques fonds (toujours en dernier) */

html[data-theme="light"] {
    --bg-0: #fbf8ff;
    --bg-1: #f4eefd;
    --bg-2: #ebe2f9;
    --surface: rgba(255, 255, 255, 0.85);
    --surface-2: rgba(90, 40, 160, 0.035);
    --surface-3: rgba(90, 40, 160, 0.07);
    --line: rgba(90, 40, 160, 0.14);
    --line-strong: rgba(90, 40, 160, 0.28);
    --text: #1b1030;
    --text-2: #45366a;
    --muted: #6f6196;
    --violet: #8a2be2;
    --magenta: #d4186f;
    --blue: #3157e0;
    --blue-2: #6a2bd9;
    --cyan: #0a83b5;
    --hc: #18a464;
    --hp: #d39b19;
    --peak: #d8406a;
    --menu-bg: #ffffff;
    --field-bg: rgba(255, 255, 255, 0.92);
    --shadow: 0 18px 44px -26px rgba(60, 20, 110, 0.35);
    color-scheme: light;
    background: var(--bg-1);
}

html[data-theme="light"] body {
    background: radial-gradient(1100px 600px at 8% -12%, rgba(166, 77, 255, 0.14), transparent 60%), radial-gradient(900px 520px at 100% -4%, rgba(255, 46, 147, 0.10), transparent 62%), linear-gradient(170deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
}

html[data-theme="light"] .panel {
    box-shadow: var(--shadow);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .notify {
    background: color-mix(in srgb, var(--n) 12%, #fff);
    box-shadow: 0 18px 40px -18px rgba(20, 50, 110, 0.45);
}

html[data-theme="light"] .tag-peak {
    color: #c2335b;
}

html[data-theme="light"] {
    --menu-bg: #ffffff;
    --vig-vert: #14a85e;
    --vig-jaune: #f2c200;
    --vig-orange: #f07800;
    --vig-rouge: #e0283b;
}

html[data-theme="light"] select option {
    background: #ffffff;
    color: var(--text);
}

html[data-theme="light"] .topbar .search-input {
    background: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .site-nav,
html[data-theme="light"] .menu-btn {
    background: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .menu-list {
    box-shadow: 0 18px 40px -14px rgba(20, 50, 110, 0.35);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    color-scheme: light;
}

html[data-theme="light"] .output,
html[data-theme="light"] .stat {
    background: rgba(255, 255, 255, 0.7);
}