/* =========================================================
   style/design-system — 12-13Li
   Composants partagés par toutes les pages.
   Les couleurs vivent dans themes/ (zinc, teal) :
   le thème actif est sélectionné via [data-theme] sur <html>.
   Style de base : zinc (fallback sans JS).
   ========================================================= */

@import url('themes/zinc.css');
@import url('themes/teal.css');

::selection { background: var(--ring); color: var(--fg); }
[hidden] { display: none !important; }

/* ---------- Fond pattern unité (partagé par toutes les pages) ---------- */
/* Le fond uni vit sur <html> pour que la couche pattern (body::before)
   reste visible par-dessus ; le contenu des pages passe devant via son
   propre z-index. Image derrière tout ; en mode clair ses couleurs sont
   inversées, en mode sombre elle reste brute. */
html { background: var(--bg); }

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: url('https://www.mil.be/vue/client/assets/patterns/pattern-land.svg') center/cover no-repeat;
    pointer-events: none;
}
html:not(.dark) body::before { filter: invert(1); }

/* Les enfants directs du body (contenu réel) passent au-dessus du pattern */
body > * { position: relative; z-index: 1; }

/* ---------- Boutons (standard unique, bordés) ---------- */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    color: var(--fg);
    font: 500 13px/1 'Geist', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ds-btn:hover { background: var(--field); border-color: var(--faint); }
.ds-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* Variante primaire : accent plein (dépend du thème) */
.ds-btn[data-variant="primary"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}
.ds-btn[data-variant="primary"]:hover { opacity: .8; background: var(--accent); border-color: var(--accent); }

/* ---------- Icônes (boutons-icônes bordés, même langage que .ds-btn) ---------- */
.ds-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.ds-icon:hover { color: var(--fg); background: var(--field); border-color: var(--faint); }
.ds-icon:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* Icône : rendu SVG uniforme (stroke Lucide) */
.ds-icon svg,
.ds-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

/* =========================================================
   BOUTON UNIQUE DE THÈME (carré : juste la pastille couleur)
   Injecté par script.js dans [data-theme-picker].
   Même langage que .ds-icon ; carré, pastille seule :
   noire pour zinc, turquoise pour teal.
   ========================================================= */
.ds-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.ds-theme-btn:hover { background: var(--field); border-color: var(--faint); }
.ds-theme-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
/* Pastille indicatrice : couleur d'accent du thème courant */
.ds-theme-btn .swatch {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}