/* ==========================================================================
   Police — Inter, servie par nous
   ==========================================================================

   Elle venait de fonts.googleapis.com, ce qui faisait de chaque page une
   requête vers un tiers : une résolution DNS et une poignée de main TLS
   supplémentaires avant le premier texte lisible, depuis un pays où la
   latence se compte en centaines de millisecondes, et une trace de visite
   déposée chez quelqu'un d'autre à chaque consultation.

   C'est la version VARIABLE (`font-weight: 100 900`), et pas un fichier par
   graisse. Le design system utilise 550 et 650 — des valeurs qu'aucune
   instance statique ne sait rendre : le navigateur les ramenait jusqu'ici à
   la graisse voisine. Un seul fichier les rend toutes, et correctement.

   Deux sous-ensembles, découpés par `unicode-range` : le navigateur ne
   télécharge `latin-ext` que si un caractère de sa plage apparaît vraiment.
   Une page ordinaire coûte donc 48 Ko, et les orthographes ivoiriennes qui
   emploient ɛ ou ɔ restent rendues dans la même police plutôt qu'en repli.

   Inter, SIL Open Font License 1.1 — le texte de la licence est déposé à
   côté des fichiers, comme elle l'exige.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   PanneCI — Jetons de design (design tokens)
   Source de vérité unique pour couleurs, espacements, typographie, ombres.
   Palette inspirée du drapeau ivoirien : orange, blanc, vert.
   ========================================================================== */

:root {
  /* ---------- Marque ---------- */
  --pc-orange-50:  #fff5ed;
  --pc-orange-100: #ffe8d4;
  --pc-orange-200: #ffcda8;
  --pc-orange-300: #ffa971;
  --pc-orange-400: #ff7a38;
  --pc-orange-500: #f77f00;   /* primaire */
  --pc-orange-600: #e26a00;
  --pc-orange-700: #bb5102;
  --pc-orange-800: #944109;
  --pc-orange-900: #78370b;

  --pc-green-50:  #edfcf3;
  --pc-green-100: #d3f8e1;
  --pc-green-200: #aaefc8;
  --pc-green-300: #72e0a8;
  --pc-green-400: #3acb85;
  --pc-green-500: #009e60;   /* vert drapeau */
  --pc-green-600: #00874f;
  --pc-green-700: #006c41;
  --pc-green-800: #025535;
  --pc-green-900: #02462d;

  /* ---------- Neutres ---------- */
  --pc-gray-0:   #ffffff;
  --pc-gray-25:  #fcfcfd;
  --pc-gray-50:  #f8fafc;
  --pc-gray-100: #f1f5f9;
  --pc-gray-200: #e2e8f0;
  --pc-gray-300: #cbd5e1;
  --pc-gray-400: #94a3b8;
  --pc-gray-500: #64748b;
  --pc-gray-600: #475569;
  --pc-gray-700: #334155;
  --pc-gray-800: #1e293b;
  --pc-gray-900: #0f172a;
  --pc-gray-950: #080f1e;

  /* ---------- États de service ----------
     Chaque état a un couple fond / texte pensé pour le contraste AA,
     en clair comme en sombre. Ne jamais utiliser la couleur seule pour
     porter l'information : toujours l'accompagner d'un libellé. */
  --pc-ok:            #0e9f6e;
  --pc-ok-bg:         #e6f6f0;
  --pc-ok-fg:         #05603a;
  --pc-warn:          #ca8a04;
  --pc-warn-bg:       #fef3e2;
  --pc-warn-fg:       #854d0e;
  --pc-down:          #e02424;
  --pc-down-bg:       #fdecec;
  --pc-down-fg:       #8f1414;
  --pc-maint:         #2563eb;
  --pc-maint-bg:      #e8f0fe;
  --pc-maint-fg:      #1a429b;

  /* ---------- Couleurs de marques pour les graphiques ----------
     Distinctes des pastilles ci-dessus : celles-ci sont posées sur la surface
     du graphique, pas derrière du texte. Validées avec
     scripts/validate_palette.js du référentiel dataviz :
       clair  (surface #ffffff) : bande de clarté, plancher de chroma,
               séparation DVC et plancher vision normale -> tous PASS ;
               contraste de --pc-mark-warn à 2.94:1 -> sous 3:1, d'où
               l'obligation d'un libellé visible, toujours présent ici.
       sombre (surface #111c30) : tous PASS ; la paire panne/perturbé est
               à ΔE 7.3 sous deutéranopie (bande plancher 6-8), légale
               uniquement avec encodage secondaire — assuré par l'icône et
               le libellé qui accompagnent systématiquement chaque état.
     Ne jamais modifier ces valeurs sans relancer le validateur. */
  --pc-mark-ok:    #0e9f6e;
  --pc-mark-warn:  #ca8a04;
  --pc-mark-down:  #e02424;
  --pc-mark-maint: #2563eb;
  --pc-mark-base:  #64748b;   /* volume « normal », série neutre */
  --pc-mark-grid:  #e2e8f0;

  /* ---------- Rôles sémantiques (mode clair) ---------- */
  --pc-bg:            var(--pc-gray-50);
  --pc-bg-elevated:   var(--pc-gray-0);
  --pc-bg-sunken:     var(--pc-gray-100);
  --pc-bg-inverse:    var(--pc-gray-900);
  --pc-surface:       var(--pc-gray-0);
  --pc-surface-hover: var(--pc-gray-50);

  --pc-text:          var(--pc-gray-900);
  --pc-text-muted:    var(--pc-gray-500);
  --pc-text-subtle:   var(--pc-gray-400);
  --pc-text-inverse:  var(--pc-gray-0);
  --pc-text-brand:    var(--pc-orange-700);

  --pc-border:        var(--pc-gray-200);
  --pc-border-strong: var(--pc-gray-300);
  --pc-border-focus:  var(--pc-orange-500);

  --pc-primary:       var(--pc-orange-500);
  --pc-primary-hover: var(--pc-orange-600);
  --pc-primary-fg:    #ffffff;

  /* ---------- Typographie ---------- */
  --pc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Pas de police à chasse fixe téléchargée : elle ne sert qu'aux axes des
     graphiques, aux préfixes de clés API et aux exemples de la page /api.
     Trente kilo-octets et une requête de plus pour cela ne se justifient
     pas — la pile du système rend très bien ces quelques caractères. */
  --pc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pc-text-xs:   0.75rem;    /* 12 */
  --pc-text-sm:   0.875rem;   /* 14 */
  --pc-text-base: 1rem;       /* 16 */
  --pc-text-lg:   1.125rem;   /* 18 */
  --pc-text-xl:   1.25rem;    /* 20 */
  --pc-text-2xl:  1.5rem;     /* 24 */
  --pc-text-3xl:  1.875rem;   /* 30 */
  --pc-text-4xl:  2.25rem;    /* 36 */
  --pc-text-5xl:  3rem;       /* 48 */

  --pc-leading-tight: 1.2;
  --pc-leading-snug:  1.4;
  --pc-leading-normal: 1.6;

  /* ---------- Espacements (échelle 4px) ---------- */
  --pc-1:  0.25rem;
  --pc-2:  0.5rem;
  --pc-3:  0.75rem;
  --pc-4:  1rem;
  --pc-5:  1.25rem;
  --pc-6:  1.5rem;
  --pc-8:  2rem;
  --pc-10: 2.5rem;
  --pc-12: 3rem;
  --pc-16: 4rem;
  --pc-20: 5rem;
  --pc-24: 6rem;

  /* ---------- Rayons ---------- */
  --pc-radius-sm:   6px;
  --pc-radius:      10px;
  --pc-radius-md:   14px;
  --pc-radius-lg:   20px;
  --pc-radius-full: 9999px;

  /* ---------- Ombres ---------- */
  --pc-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --pc-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --pc-shadow:    0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  --pc-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.04);
  --pc-shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.16);

  /* ---------- Divers ---------- */
  --pc-container: 1200px;
  --pc-container-narrow: 760px;
  --pc-header-h: 68px;
  --pc-sidebar-w: 256px;
  --pc-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --pc-ring: 0 0 0 3px rgba(247, 127, 0, 0.28);
}

/* ==========================================================================
   Mode sombre
   Appliqué automatiquement selon la préférence système, sauf si l'utilisateur
   a explicitement choisi le thème clair (data-theme="light" sur <html>).
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pc-bg:            var(--pc-gray-950);
    --pc-bg-elevated:   #111c30;
    --pc-bg-sunken:     #0b1424;
    --pc-bg-inverse:    var(--pc-gray-0);
    --pc-surface:       #111c30;
    --pc-surface-hover: #182640;

    --pc-text:          #e8edf5;
    --pc-text-muted:    #94a3b8;
    --pc-text-subtle:   #64748b;
    --pc-text-inverse:  var(--pc-gray-900);
    --pc-text-brand:    var(--pc-orange-300);

    --pc-border:        #1e2e4a;
    --pc-border-strong: #2c4167;

    --pc-primary:       var(--pc-orange-400);
    --pc-primary-hover: var(--pc-orange-300);
    --pc-primary-fg:    #1a1005;

    --pc-ok-bg:    #0b2e22;
    --pc-ok-fg:    #6ee7b7;
    --pc-warn-bg:  #35240a;
    --pc-warn-fg:  #fcd34d;
    --pc-down-bg:  #3a1517;
    --pc-down-fg:  #fca5a5;
    --pc-maint-bg: #11244c;
    --pc-maint-fg: #93c5fd;

    --pc-mark-ok:    #17a169;
    --pc-mark-warn:  #b88a12;
    --pc-mark-down:  #d64545;
    --pc-mark-maint: #4282e0;
    --pc-mark-base:  #7c8ba3;
    --pc-mark-grid:  #1e2e4a;

    --pc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --pc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --pc-shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
    --pc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --pc-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7);
    --pc-ring: 0 0 0 3px rgba(255, 122, 56, 0.35);
  }
}

/* Thème sombre forcé par l'utilisateur */
:root[data-theme="dark"] {
  --pc-bg:            var(--pc-gray-950);
  --pc-bg-elevated:   #111c30;
  --pc-bg-sunken:     #0b1424;
  --pc-bg-inverse:    var(--pc-gray-0);
  --pc-surface:       #111c30;
  --pc-surface-hover: #182640;

  --pc-text:          #e8edf5;
  --pc-text-muted:    #94a3b8;
  --pc-text-subtle:   #64748b;
  --pc-text-inverse:  var(--pc-gray-900);
  --pc-text-brand:    var(--pc-orange-300);

  --pc-border:        #1e2e4a;
  --pc-border-strong: #2c4167;

  --pc-primary:       var(--pc-orange-400);
  --pc-primary-hover: var(--pc-orange-300);
  --pc-primary-fg:    #1a1005;

  --pc-ok-bg:    #0b2e22;
  --pc-ok-fg:    #6ee7b7;
  --pc-warn-bg:  #35240a;
  --pc-warn-fg:  #fcd34d;
  --pc-down-bg:  #3a1517;
  --pc-down-fg:  #fca5a5;
  --pc-maint-bg: #11244c;
  --pc-maint-fg: #93c5fd;

  --pc-mark-ok:    #17a169;
  --pc-mark-warn:  #b88a12;
  --pc-mark-down:  #d64545;
  --pc-mark-maint: #4282e0;
  --pc-mark-base:  #7c8ba3;
  --pc-mark-grid:  #1e2e4a;

  --pc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --pc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --pc-shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
  --pc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --pc-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7);
  --pc-ring: 0 0 0 3px rgba(255, 122, 56, 0.35);
}