/*
 * Copyright (c) 2025-2026.
 * kwargs SRL — Ingénierie logicielle, Bruxelles
 * Tous droits réservés.
 */

/* ── WATTWATCH : PALETTE ─────────────────────────────────────────── */
/*                                                                      */
/*  Identité visuelle WattWatch — énergie / vigilance / maîtrise        */
/*  Couleurs extraites du logo (dégradé vert → ambre → rouge).          */
/*  Écrase la palette praxis par cascade CSS.                           */
/*                                                                      */
/* ─────────────────────────────────────────────────────────────────── */

:root {

    /* ── 1. Les 8 couleurs ──────────────────────────────────────── */
    /*                                                                */
    /*  Du vert olive (énergie propre) à l'ambre (chaleur, signal)    */
    /*  en passant par le rouge brique (alerte).                      */
    /*                                                                */

    --ks-linen:       #f5f3ef;   /* lin chaud — fond clair                  */
    --ks-charcoal:    #1a1e21;   /* charbon — fond sombre                   */
    --ks-slate:       #48555D;   /* ardoise bleutée — primaire, autorité    */
    --ks-amber:       #F4A83A;   /* ambre — énergie, action, accent         */
    --ks-olive:       #6A7A55;   /* vert olive — succès, validation         */
    --ks-brick:       #903024;   /* rouge brique — danger, erreur           */
    --ks-gold:        #E3B23B;   /* or chaud — signal, attention, warning   */
    --ks-burnt:       #E6703E;   /* orange brûlé — info, technique          */

    /* ── 2. Variantes thème sombre ──────────────────────────────── */

    --ks-slate-light:  #6d7e88;  /* ardoise éclaircie pour fond sombre      */
    --ks-amber-light:  #f7c06a;  /* ambre éclaircie pour fond sombre        */

    /* ── 3. Assignation des rôles ───────────────────────────────── */

    --ks-surface-light: var(--ks-linen);
    --ks-surface-dark:  var(--ks-charcoal);

    --ks-primary:       var(--ks-slate);
    --ks-primary-rgb:   72, 85, 93;

    --ks-secondary:     var(--ks-amber);
    --ks-secondary-rgb: 244, 168, 58;

    --ks-success:       var(--ks-olive);
    --ks-success-rgb:   106, 122, 85;

    --ks-danger:        var(--ks-brick);
    --ks-danger-rgb:    144, 48, 36;

    --ks-warning:       var(--ks-gold);
    --ks-warning-rgb:   227, 178, 59;

    --ks-info:          var(--ks-burnt);
    --ks-info-rgb:      230, 112, 62;

    /* ── 4. Logo typographique ────────────────────────────────── */
    /*  "watt" en light, "watch" en bold.                           */

    --ks-brand-accent:  var(--ks-amber);
}

/* ── 5. Scroll offset pour navbar sticky ────────────────────── */

section[id] {
    scroll-margin-top: 5rem;
}

/* ── 6. Surcharges composants ────────────────────────────────── */

.btn-info {
    color: var(--ks-charcoal);
}

.btn-info:hover,
.btn-info:active {
    color: var(--ks-charcoal);
}

.btn-warning {
    color: var(--ks-charcoal);
}

.btn-warning:hover,
.btn-warning:active {
    color: var(--ks-charcoal);
}

#btn-back-to-top {
    background-color: var(--ks-amber);
}

#btn-back-to-top:hover {
    background-color: var(--ks-slate);
}

#btn-back-to-top:focus-visible {
    outline-color: var(--ks-amber);
}

/* ── 7. Thème sombre ───────────────────────────────────────────── */

[data-bs-theme="dark"] {
    --ks-brand-accent: var(--ks-amber-light);
}