/* ═══════════════════════════════════════════════════════════════
   Thème « Matea »
   Aligné sur blog.matea.be et podcast.matea.be.

   Ces valeurs sont la source de vérité de la marque Matea : si tu les
   modifies ici, reporte-les dans le CSS du blog et du podcast, qui
   utilisent exactement les mêmes noms.

   ── Comment fonctionne le clair/sombre ──
   Chaque jeton est déclaré deux fois. La première ligne est un repli
   pour les navigateurs anciens qui ignorent `light-dark()` : ils
   gardent la version sombre, parfaitement lisible. La seconde donne
   les deux variantes en une seule déclaration, ce qui évite de tenir
   deux palettes en parallèle — et donc de les laisser diverger.

   Le mode suit le réglage du système, sauf si le visiteur a cliqué sur
   le bouton soleil/lune : celui-ci force `color-scheme` sur :root.
   ═══════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light dark;

    /* Fonds et traits */
    --bg:            #0e0e10;
    --bg:            light-dark(#fafafa, #0e0e10);
    --bg-elevated:   #16161a;
    --bg-elevated:   light-dark(#ffffff, #16161a);
    --bg-hover:      #1e1e24;
    --bg-hover:      light-dark(#f2f2f9, #1e1e24);
    --border:        #25252d;
    --border:        light-dark(#e2e2ef, #25252d);
    --border-strong: #303038;
    --border-strong: light-dark(#cdcde0, #303038);

    /* Textes */
    --text:       #d4d4d8;
    --text:       light-dark(#27272a, #d4d4d8);
    --text-muted: #6b6b75;
    --text-muted: light-dark(#71717a, #6b6b75);
    --heading:    #f4f4f5;
    --heading:    light-dark(#09090b, #f4f4f5);

    /* Couleurs de marque. L'accent peut être remplacé depuis
       l'administration ; ci-dessous, celui du blog. */
    --accent:      #818cf8;
    --accent:      light-dark(#6366f1, #818cf8);
    --accent-2:    #38bdf8;
    --accent-2:    light-dark(#0891b2, #38bdf8);
    --accent-soft: #a5b0fb;
    --accent-soft: light-dark(#8b8df5, #a5b0fb);
    --accent-deep: #5b67d4;
    --accent-deep: light-dark(#4f46e5, #5b67d4);
    --on-accent:   #ffffff;
    --grad:        linear-gradient(90deg, #818cf8, #c084fc 50%, #38bdf8);

    /* Typographie : Inter pour le texte, JetBrains Mono pour les
       métadonnées — la signature visuelle de Matea. */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Angles peu marqués, comme sur le blog. */
    --radius:    12px;
    --radius-sm: 8px;

    /* Halo teinté par l'accent, comme le liseré du blog. */
    --glow: var(--accent);

    /* Couleurs de sens, communes aux deux identités : elles ne disent
       pas la marque mais l'état (disponible, envoyé, refusé). */
    --ok:        #16a34a;
    --ok:        light-dark(#16a34a, #4ade80);
    --ok-text:   #0f7a4f;
    --ok-text:   light-dark(#0f7a4f, #86efac);
    --danger:      #dc2626;
    --danger:      light-dark(#dc2626, #f87171);
    --danger-text: #b3261e;
    --danger-text: light-dark(#b3261e, #fca5a5);

    /* `light-dark()` ne s'applique qu'aux couleurs : la géométrie de
       l'ombre reste fixe, seule sa teinte change. */
    --shadow-color: light-dark(rgba(15, 23, 42, .35), rgba(0, 0, 0, .8));
    --shadow: 0 16px 38px -18px var(--shadow-color);
}

/* Choix explicite du visiteur : il l'emporte sur le réglage système. */
:root[data-scheme="light"] { color-scheme: light; }
:root[data-scheme="dark"]  { color-scheme: dark; }

/* ── Écrans à gamut étendu (P3) ───────────────────────────────────
   Les valeurs claires reprennent exactement celles du blog, pour que
   les trois sites affichent le même bleu sur un écran Apple récent.
   Les variantes sombres sont dérivées dans le même esprit : un cran
   plus vif que leur équivalent sRGB, sans changer de teinte.

   Note : les mélanges `color-mix(in srgb, …)` de la feuille principale
   restent, eux, ramenés dans sRGB. Ils ne servent qu'à des teintes
   très diluées (halos, pastilles), où l'écart est invisible. Ce sont
   les aplats — bouton, icônes, filets — qui profitent du P3.
   ───────────────────────────────────────────────────────────────── */
@media (color-gamut: p3) {
    :root {
        --accent:      light-dark(color(display-p3 .37 .39 .96),
                                  color(display-p3 .49 .54 .99));
        --accent-2:    light-dark(color(display-p3 .03 .56 .70),
                                  color(display-p3 .20 .74 .99));
        --accent-soft: light-dark(color(display-p3 .53 .55 .97),
                                  color(display-p3 .64 .68 1));
        --accent-deep: light-dark(color(display-p3 .29 .26 .90),
                                  color(display-p3 .35 .40 .84));

        --ok:          light-dark(color(display-p3 .08 .62 .27),
                                  color(display-p3 .29 .87 .50));
        --danger:      light-dark(color(display-p3 .85 .14 .22),
                                  color(display-p3 .96 .44 .44));
    }
}