/* ==========================================================================
   SkyNet Suivi — jetons de design (source unique)
   Variables CSS des deux thèmes : nuit (défaut) et plein jour
   ([data-theme="clair"] ou préférence système). Utilisées telles quelles par
   le prototype, par le préréglage Tailwind 3 (tailwind.preset.js) et par le
   bloc @theme de Tailwind 4 (tailwind-v4.css).
   Polices : --titre et --mono sont posées par next/font dans l'application
   (mêmes noms que le site vitrine) ; le prototype retombe sur ses @font-face.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* Surfaces : la nuit de la charte, du plus profond au plus proche */
  --fond: #070A0F;
  --surface: #0B1119;
  --surface-2: #111A25;
  --surface-3: #1A2634;
  --surface-verre: rgba(11, 17, 25, 0.74);
  --trait: #1A2634;
  --trait-fort: #28394C;
  /* Textes : la craie */
  --texte: #E8EFF7;
  --texte-2: #A7B6C9;
  --texte-3: #7D8EA5;           /* craie sourd éclairci : 4,58:1 au pire */
  /* Signal (accent unique) et ambre (alerte) */
  --accent: #22D3EE;
  --accent-vif: #67E8F9;
  --accent-profond: #0891B2;
  --accent-doux: rgba(34, 211, 238, 0.12);
  --accent-trait: rgba(34, 211, 238, 0.38);
  --sur-accent: #070A0F;
  --alerte: #F5A524;
  --alerte-doux: rgba(245, 165, 36, 0.12);
  /* Feux et gravités (couleur + forme + libellé, jamais la couleur seule) */
  --feu-vert: #34D399;
  --feu-orange: #F5A524;
  --feu-rouge: #F43F5E;
  --feu-gris: #8A94A3;
  --txt-vert: #34D399;
  --txt-orange: #F5A524;
  --txt-rouge: #FB7185;
  --txt-gris: #A7B6C9;
  --fond-vert: rgba(52, 211, 153, 0.12);
  --fond-orange: rgba(245, 165, 36, 0.12);
  --fond-rouge: rgba(244, 63, 94, 0.14);
  --fond-gris: rgba(138, 148, 163, 0.12);
  --sur-feu: #070A0F;
  --sur-gravite: #070A0F;
  /* Profondeur : en sombre, des liserés et des lueurs plutôt que des ombres */
  --ombre-1: inset 0 1px 0 rgba(232, 239, 247, 0.04), 0 0 0 1px var(--trait);
  --ombre-2: inset 0 1px 0 rgba(232, 239, 247, 0.05), 0 0 0 1px var(--trait-fort), 0 24px 48px -24px rgba(0, 0, 0, 0.8);
  --lueur: 0 0 0 1px var(--accent-trait), 0 0 32px -6px rgba(34, 211, 238, 0.45);
  --trame: rgba(40, 57, 76, 0.32);
  --grain: 0.035;
  --lueur-fond: radial-gradient(80% 50% at 50% -10%, rgba(34, 211, 238, 0.11), transparent 70%),
                radial-gradient(40% 40% at 100% 0%, rgba(245, 165, 36, 0.06), transparent 70%);

  /* Typographie : une famille, trois largeurs */
  --police: var(--titre, "Archivo SN"), "Archivo", system-ui, sans-serif;
  --police-mono: var(--mono, "Plex Mono SN"), "IBM Plex Mono", ui-monospace, monospace;
  --t-hero: clamp(2.1rem, 1.3rem + 3vw, 3.4rem);
  --t-h1: clamp(1.65rem, 1.25rem + 1.5vw, 2.3rem);
  --t-h2: 1.25rem;
  --t-h3: 1.0625rem;
  --t-corps: 1rem;
  --t-petit: 0.875rem;
  --t-micro: 0.75rem;
  --large: 116%;      /* titres : signalétique de chantier */
  --etroit: 80%;      /* tableaux denses, matrice */

  /* Espacements (base 4 px), rayons, couches */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pilule: 999px;
  --z-barre: 10; --z-nav: 20; --z-tiroir: 30; --z-toast: 40; --z-bulle: 50;

  /* Mouvement */
  --d-1: 120ms;   /* pression */
  --d-2: 200ms;   /* survol, bascule */
  --d-3: 320ms;   /* changement d'état */
  --d-4: 520ms;   /* arrivée de données, panneaux */
  --d-5: 1200ms;  /* récit : compteurs, jauges, analyse */
  --c-sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --c-entree: cubic-bezier(0.7, 0, 0.84, 0);
  --c-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --c-ressort: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
    1.121 24%, 1.149 26.3%, 1.159, 1.163, 1.16, 1.154 31.1%, 1.129 33.8%, 1.051 39.6%, 1.017 43.1%,
    0.991, 0.977 51%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
}

/* Plein jour : thème clair pour le chantier au soleil. Il suit la préférence du
   système, et le bouton de la barre le force (data-theme="clair" | "sombre"). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) {
    color-scheme: light;
    --fond: #EEF2F6;
    --surface: #FFFFFF;
    --surface-2: #F5F8FB;
    --surface-3: #E3E9F0;
    --surface-verre: rgba(255, 255, 255, 0.82);
    --trait: #DCE3EB;
    --trait-fort: #B9C5D3;
    --texte: #0B1119;
    --texte-2: #34445A;
    --texte-3: #59697F;
    --accent: #0B6680;
    --accent-vif: #0891B2;
    --accent-profond: #0B6680;
    --accent-doux: rgba(8, 145, 178, 0.10);
    --accent-trait: rgba(8, 145, 178, 0.45);
    --sur-accent: #FFFFFF;
    --alerte: #9C4A08;
    --alerte-doux: rgba(217, 119, 6, 0.12);
    --feu-vert: #047857;
    --feu-orange: #D97706;
    --feu-rouge: #E11D48;
    --feu-gris: #8A94A3;
    --txt-vert: #047857;
    --txt-orange: #9C4A08;
    --txt-rouge: #BE123C;
    --txt-gris: #59697F;
    --fond-vert: #E5F5EE;
    --fond-orange: #FDF0DF;
    --fond-rouge: #FDE7EC;
    --fond-gris: #EDF0F4;
    --sur-feu: #FFFFFF;
    --sur-gravite: #FFFFFF;
    --ombre-1: 0 1px 2px rgba(11, 17, 25, 0.05), 0 0 0 1px var(--trait);
    --ombre-2: 0 1px 2px rgba(11, 17, 25, 0.06), 0 0 0 1px var(--trait), 0 20px 40px -24px rgba(11, 17, 25, 0.28);
    --lueur: 0 0 0 1px var(--accent-trait), 0 0 0 4px rgba(8, 145, 178, 0.12);
    --trame: rgba(11, 102, 128, 0.075);
    --grain: 0;
    --lueur-fond: radial-gradient(80% 50% at 50% -10%, rgba(8, 145, 178, 0.08), transparent 70%);
  }
}
:root[data-theme="clair"] {
  color-scheme: light;
  --fond: #EEF2F6;
  --surface: #FFFFFF;
  --surface-2: #F5F8FB;
  --surface-3: #E3E9F0;
  --surface-verre: rgba(255, 255, 255, 0.82);
  --trait: #DCE3EB;
  --trait-fort: #B9C5D3;
  --texte: #0B1119;
  --texte-2: #34445A;
  --texte-3: #59697F;
  --accent: #0B6680;
  --accent-vif: #0891B2;
  --accent-profond: #0B6680;
  --accent-doux: rgba(8, 145, 178, 0.10);
  --accent-trait: rgba(8, 145, 178, 0.45);
  --sur-accent: #FFFFFF;
  --alerte: #9C4A08;
  --alerte-doux: rgba(217, 119, 6, 0.12);
  --feu-vert: #047857;
  --feu-orange: #D97706;
  --feu-rouge: #E11D48;
  --feu-gris: #8A94A3;
  --txt-vert: #047857;
  --txt-orange: #9C4A08;
  --txt-rouge: #BE123C;
  --txt-gris: #59697F;
  --fond-vert: #E5F5EE;
  --fond-orange: #FDF0DF;
  --fond-rouge: #FDE7EC;
  --fond-gris: #EDF0F4;
  --sur-feu: #FFFFFF;
  --sur-gravite: #FFFFFF;
  --ombre-1: 0 1px 2px rgba(11, 17, 25, 0.05), 0 0 0 1px var(--trait);
  --ombre-2: 0 1px 2px rgba(11, 17, 25, 0.06), 0 0 0 1px var(--trait), 0 20px 40px -24px rgba(11, 17, 25, 0.28);
  --lueur: 0 0 0 1px var(--accent-trait), 0 0 0 4px rgba(8, 145, 178, 0.12);
  --trame: rgba(11, 102, 128, 0.075);
  --grain: 0;
  --lueur-fond: radial-gradient(80% 50% at 50% -10%, rgba(8, 145, 178, 0.08), transparent 70%);
}