/* ==========================================================================
   Variables — Le Comptoir JunaSol
   Palette olive / sable / terre cuite · Mode light + dark
   ========================================================================== */

:root {
    /* --- Palette olive (principale) --- */
    --olive:        #6B8E3D;
    --olive-dark:   #54722E;
    --olive-light:  #A4BE77;

    /* --- Sable (secondaire) --- */
    --sable:        #C8A96A;
    --sable-dark:   #A58B53;
    --sable-light:  #E6D4A9;

    /* --- Terre cuite (accent) --- */
    --terre:        #D97742;
    --terre-dark:   #B05A2E;

    /* --- Neutres (light mode) --- */
    --bg:           #FAF7F0;
    --surface:      #FFFFFF;
    --surface-alt:  #F4EFE6;
    --text:         #1F2A1A;
    --muted:        #5A6B4E;
    --border:       rgba(31, 42, 26, 0.12);
    --border-strong:rgba(31, 42, 26, 0.24);

    /* --- Feedback --- */
    --success: #4A7A2B;
    --warning: #D97742;
    --error:   #B84A2E;

    /* --- Typographie --- */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* --- Échelle spacing (base 4px) --- */
    --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
    --s-5: 1.25rem;  --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
    --s-12: 3rem;    --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;
    --s-32: 8rem;    --s-40: 10rem;

    /* --- Radius --- */
    --r-sm:   0.25rem;
    --r-md:   0.5rem;
    --r-lg:   1rem;
    --r-xl:   1.5rem;
    --r-full: 999px;

    /* --- Elevation ambiante --- */
    --shadow-sm: 0 2px 8px rgba(86, 66, 61, 0.06);
    --shadow-md: 0 8px 24px rgba(86, 66, 61, 0.08);
    --shadow-lg: 0 20px 40px rgba(86, 66, 61, 0.10);

    /* --- Transitions --- */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur:  0.4s;
    --dur-fast: 0.2s;

    /* --- Layout --- */
    --container:        1240px;
    --container-narrow: 880px;
    --container-wide:   1440px;
    --nav-h:            72px;
    --bar-h:            36px;
}

html[data-theme="dark"] {
    --bg:           #15190F;
    --surface:      #1F2418;
    --surface-alt:  #262C1E;
    --text:         #F4EFE6;
    --muted:        #B6B29E;
    --border:       rgba(244, 239, 230, 0.12);
    --border-strong:rgba(244, 239, 230, 0.24);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Respect de la préférence système au premier chargement */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --bg:           #15190F;
        --surface:      #1F2418;
        --surface-alt:  #262C1E;
        --text:         #F4EFE6;
        --muted:        #B6B29E;
        --border:       rgba(244, 239, 230, 0.12);
        --border-strong:rgba(244, 239, 230, 0.24);
    }
}