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

/* ── WORKLOADR : PALETTE ─────────────────────────────────────────── */
/*                                                                      */
/*  Identité visuelle workloadr — rythme / équilibre / ajustement       */
/*  Écrase la palette praxis par cascade CSS.                           */
/*                                                                      */
/* ─────────────────────────────────────────────────────────────────── */

:root {

    /* ── 1. Les couleurs ───────────────────────────────────────── */

    --ks-chalk:       #EEF4ED;   /* menthe givrée — fond clair             */
    --ks-night:       #0a0a2e;   /* nuit sourde — fond sombre               */
    --ks-indigo:      #434371;   /* indigo crépusculaire — primaire        */
    --ks-tangerine:   #ff7f11;   /* mandarine — énergie, action, accent    */
    --ks-sea-green:   #488b49;   /* vert marin — succès, validation        */
    --ks-wine:        #800e13;   /* vin sombre — danger, erreur            */
    --ks-canary:      #faff81;   /* canari — signal, attention, warning    */

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

    --ks-indigo-light:    #6b6ba0; /* indigo éclairci pour fond sombre     */
    --ks-tangerine-light: #ffab5e; /* mandarine éclaircie pour fond sombre */

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

    --ks-surface-light: var(--ks-chalk);
    --ks-surface-dark:  var(--ks-night);

    --ks-primary:       var(--ks-indigo);
    --ks-primary-rgb:   67, 67, 113;

    --ks-secondary:     var(--ks-tangerine);
    --ks-secondary-rgb: 255, 127, 17;

    --ks-success:       var(--ks-sea-green);
    --ks-success-rgb:   72, 139, 73;

    --ks-danger:        var(--ks-wine);
    --ks-danger-rgb:    128, 14, 19;

    --ks-warning:       var(--ks-canary);
    --ks-warning-rgb:   250, 255, 129;

    --ks-mint:          #7AE7C7;   /* menthe vive — info, technique        */

    --ks-info:          var(--ks-mint);
    --ks-info-rgb:      122, 231, 199;

    /* ── 4. Logo typographique ────────────────────────────────── */
    /*  "work" en light, "loadr" en bold + accent mandarine.        */

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

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

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

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

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

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

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

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

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

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

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

/* ── 7. Dashboard : pointeuse pulse ────────────────────────────── */

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* ── 8. Card hover (projets cliquables) ────────────────────────── */

.card-hover {
    transition: box-shadow .2s ease, transform .2s ease;
}

.card-hover:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    transform: translateY(-2px);
}

/* ── 9. Scroll tabs mobile ─────────────────────────────────────── */

.nav-underline.overflow-auto::-webkit-scrollbar {
    display: none;
}

/* ── 10. Screenshots en perspective ────────────────────────────── */

.screenshot-tilt {
    transform: perspective(1000px) rotateY(-12deg) rotateX(3deg);
    transition: transform .4s ease;
}

.screenshot-tilt:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.screenshot-tilt-reverse {
    transform: perspective(1000px) rotateY(12deg) rotateX(3deg);
    transition: transform .4s ease;
}

.screenshot-tilt-reverse:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

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