/*
 * DropBag - jetons de design partagés par le site et l'admin.
 * Trois maquettes (data-palette = bleu | violet | vert), chacune en clair et en sombre.
 * Le mode suit l'appareil, sauf si data-theme="light" ou "dark" est posé sur <html>.
 *
 * --c1 : couleur principale (boutons, liens, mises en relief)
 * --c2 : couleur d'accent (balisage, pastilles, décors) ; --c2-ink = texte posé dessus
 */

:root {
    --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
    --font-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --radius-lg: 28px;
    --radius: 18px;
    --radius-sm: 12px;
    --container: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
    --header-h: 72px;
    --ease: cubic-bezier(.2, .7, .2, 1);

    color-scheme: light;
}

/* ---------- Glacier : bleu cobalt & orange balise ---------- */
:root[data-palette="bleu"] {
    --l-c1: #1C4FD8; --l-c1-ink: #ffffff; --l-c2: #FF7A1A; --l-c2-ink: #2B1100;
    --l-bg: #F5F7FB; --l-bg-alt: #EAF0FA; --l-surface: #ffffff; --l-text: #0E1626; --l-muted: #536077; --l-line: #D9E1EE;
    --d-c1: #6E96FF; --d-c1-ink: #06102A; --d-c2: #FF8C42; --d-c2-ink: #2B1100;
    --d-bg: #0A0F1C; --d-bg-alt: #0E1527; --d-surface: #131B2F; --d-text: #E9EEF8; --d-muted: #9AA6BD; --d-line: #222D46;
    --footer-bg: #070B16;
}

/* ---------- Crépuscule : violet & rose alpenglow ---------- */
:root[data-palette="violet"] {
    --l-c1: #6A2BD8; --l-c1-ink: #ffffff; --l-c2: #F23F6F; --l-c2-ink: #ffffff;
    --l-bg: #F8F6FD; --l-bg-alt: #F0EAFB; --l-surface: #ffffff; --l-text: #170F2A; --l-muted: #5F5774; --l-line: #E3DAF2;
    --d-c1: #A784FF; --d-c1-ink: #14072D; --d-c2: #FF6A92; --d-c2-ink: #2A0613;
    --d-bg: #0E0A1A; --d-bg-alt: #140F25; --d-surface: #1A1430; --d-text: #F0ECFA; --d-muted: #A9A0C0; --d-line: #2D2547;
    --footer-bg: #0B0716;
}

/* ---------- Forêt : vert sapin & lime ---------- */
:root[data-palette="vert"] {
    --l-c1: #0B7A4B; --l-c1-ink: #ffffff; --l-c2: #C5E636; --l-c2-ink: #182300;
    --l-bg: #F5F7F2; --l-bg-alt: #E9F0E3; --l-surface: #ffffff; --l-text: #0F1A14; --l-muted: #55645A; --l-line: #D9E3D2;
    --d-c1: #3CC984; --d-c1-ink: #03200F; --d-c2: #D4F04A; --d-c2-ink: #182300;
    --d-bg: #08110C; --d-bg-alt: #0C1811; --d-surface: #112019; --d-text: #E8F2EC; --d-muted: #94A99C; --d-line: #1F3429;
    --footer-bg: #050C08;
}

/* Mode clair (par défaut) */
:root {
    --c1: var(--l-c1); --c1-ink: var(--l-c1-ink); --c2: var(--l-c2); --c2-ink: var(--l-c2-ink);
    --bg: var(--l-bg); --bg-alt: var(--l-bg-alt); --surface: var(--l-surface);
    --text: var(--l-text); --muted: var(--l-muted); --line: var(--l-line);
    --c1-soft: color-mix(in srgb, var(--c1) 11%, var(--surface));
    --c2-soft: color-mix(in srgb, var(--c2) 22%, var(--surface));
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .05);
    --shadow: 0 2px 6px rgba(15, 23, 42, .05), 0 18px 40px -16px rgba(15, 23, 42, .22);
    --shadow-lg: 0 30px 80px -30px rgba(15, 23, 42, .45);
    --topo-alpha: .13;
    --footer: var(--footer-bg);
    /* logo : toujours les couleurs profondes de la maquette, y compris en mode sombre */
    --logo-c1: var(--l-c1);
    --logo-c2: var(--l-c2);
}

/* Mode sombre : réglage de l'appareil (sauf choix explicite du clair) ou choix explicite */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c1: var(--d-c1); --c1-ink: var(--d-c1-ink); --c2: var(--d-c2); --c2-ink: var(--d-c2-ink);
        --bg: var(--d-bg); --bg-alt: var(--d-bg-alt); --surface: var(--d-surface);
        --text: var(--d-text); --muted: var(--d-muted); --line: var(--d-line);
        --c1-soft: color-mix(in srgb, var(--c1) 16%, var(--surface));
        --c2-soft: color-mix(in srgb, var(--c2) 18%, var(--surface));
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .7);
        --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, .9);
        --topo-alpha: .16;
        --footer: color-mix(in srgb, var(--d-c1) 7%, var(--d-bg-alt));
        --hl-mix: 38%;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --c1: var(--d-c1); --c1-ink: var(--d-c1-ink); --c2: var(--d-c2); --c2-ink: var(--d-c2-ink);
    --bg: var(--d-bg); --bg-alt: var(--d-bg-alt); --surface: var(--d-surface);
    --text: var(--d-text); --muted: var(--d-muted); --line: var(--d-line);
    --c1-soft: color-mix(in srgb, var(--c1) 16%, var(--surface));
    --c2-soft: color-mix(in srgb, var(--c2) 18%, var(--surface));
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .7);
    --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, .9);
    --topo-alpha: .16;
    --footer: color-mix(in srgb, var(--d-c1) 7%, var(--d-bg-alt));
    --hl-mix: 38%;
    color-scheme: dark;
}