/* tokens.css — charte Apalala, brique Bricks apalala-tokens@1.2.0 (package apalala-web),
   recopiée telle quelle depuis le catalogue. style.css ne consomme que ces variables.
   Polices auto-hébergées (exigence de la catégorie charte-apalala). */

/* apalala-tokens@1.2.0 */
:root {
  /* Palette de marque */
  --brick-color-primary: #467082;
  --brick-color-primary-dark: #1a4e5a;
  --brick-color-primary-light: #78a3b6;
  --brick-color-accent: #a3d948;
  --brick-color-accent-ink: #0d1721;
  --brick-color-orange: #f19a3e;
  --brick-color-white: #ffffff;

  /* Rampes sombres (thème par défaut) */
  --brick-color-bg: #0d1721;
  --brick-color-topbar: #0a1219;
  --brick-color-surface: #111e29;
  --brick-color-surface-2: #0a1219;
  --brick-color-border: #1e3341;
  --brick-color-border-strong: #27414f;

  /* Texte */
  --brick-color-text: #e6edf2;
  --brick-color-muted: #9fb4c1;
  --brick-color-faint: #5b7484;

  /* Statuts */
  --brick-color-success: #10b981;
  --brick-color-success-bg: #0f2e24;
  --brick-color-warning: #f19a3e;
  --brick-color-warning-bg: #33240f;
  --brick-color-danger: #ef4444;
  --brick-color-danger-bg: #331416;

  /* Polices, espacements, rayons, ombres */
  --brick-font-title: "Poppins", sans-serif;
  --brick-font-sans: "Roboto Flex", system-ui, sans-serif;
  --brick-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --brick-space-1: 4px;
  --brick-space-2: 8px;
  --brick-space-3: 12px;
  --brick-space-4: 16px;
  --brick-space-6: 24px;
  --brick-space-8: 32px;
  --brick-radius-sm: 8px;
  --brick-radius: 9px;
  --brick-radius-lg: 12px;
  --brick-shadow: 0 1px 3px rgb(0 0 0 / 0.24);
}

/* Variante claire explicite : le HTML bascule via data-theme="light". */
[data-theme="light"] {
  --brick-color-bg: #f5f7fa;
  --brick-color-topbar: #ffffff;
  --brick-color-surface: #ffffff;
  --brick-color-surface-2: #f5f7fa;
  --brick-color-border: #bad0da;
  --brick-color-border-strong: #78a3b6;
  --brick-color-text: #1f2937;
  --brick-color-muted: #1a4e5a;
  --brick-color-faint: #467082;
  --brick-color-accent: #1a4e5a;
  --brick-color-accent-ink: #ffffff;
  --brick-color-success: #1f8a4c;
  --brick-color-success-bg: #e4f5ee;
  --brick-color-warning: #d98200;
  --brick-color-warning-bg: #fcf1df;
  --brick-color-danger: #c62828;
  --brick-color-danger-bg: #fdecea;
  --brick-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

/* Repli pour les préférences système si data-theme n'est pas posé. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --brick-color-bg: #f5f7fa;
    --brick-color-topbar: #ffffff;
    --brick-color-surface: #ffffff;
    --brick-color-surface-2: #f5f7fa;
    --brick-color-border: #bad0da;
    --brick-color-border-strong: #78a3b6;
    --brick-color-text: #1f2937;
    --brick-color-muted: #1a4e5a;
    --brick-color-faint: #467082;
    --brick-color-accent: #1a4e5a;
    --brick-color-accent-ink: #ffffff;
  }
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Flex";
  src: url("../assets/fonts/roboto-flex-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}