/* ==========================================================================
   Tokens — palette, typographie, rayons, grille bento
   Toute modification de couleur/police/rayon se fait UNIQUEMENT ici.
   ========================================================================== */

/* --- Polices auto-hébergées (Montserrat + Roboto, sous-ensemble Latin) --- */

@font-face {
  font-family: "Montserrat";
  src: url("../polices/subset-Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../polices/subset-Montserrat-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../polices/subset-Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../polices/subset-Montserrat-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../polices/subset-Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../polices/subset-Roboto-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typographie */
  --font-body: "Montserrat", sans-serif;
  --font-heading: "Roboto", sans-serif;

  /* Couleurs — mode clair (par défaut) */
  --color-bg: #ffffff;
  --color-surface: #f3f3f3;
  --color-text: #454545;
  --color-text-muted: rgba(67, 72, 78, 0.6);
  --color-primary: #3d8cc0;
  --color-accent: #e04848;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-header-bg: rgba(255, 255, 255, 0.9);

  /* Rayons */
  --radius-sm: 20px;
  --radius-lg: 28px;

  /* Grille / espacement */
  --bento-gap: 1rem;
  --container-max: 1200px;
  --header-height: 64px;

  /* Transition douce lors du basculement jour/nuit */
  color-scheme: light;
}

/* Mode sombre — automatique selon le réglage système */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-text: #ececec;
    --color-text-muted: rgba(236, 236, 236, 0.6);
    --color-primary: #6fb3de;
    --color-accent: #ff6b6b;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-overlay: rgba(0, 0, 0, 0.55);
    --color-header-bg: rgba(18, 18, 18, 0.85);
    color-scheme: dark;
  }
}

/* Bascule manuelle (bouton dans l'en-tête), sans mémorisation */
:root[data-theme="dark"] {
  --color-bg: #121212;
  --color-surface: #1e1e1e;
  --color-text: #ececec;
  --color-text-muted: rgba(236, 236, 236, 0.6);
  --color-primary: #6fb3de;
  --color-accent: #ff6b6b;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-header-bg: rgba(18, 18, 18, 0.85);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #f3f3f3;
  --color-text: #454545;
  --color-text-muted: rgba(67, 72, 78, 0.6);
  --color-primary: #3d8cc0;
  --color-accent: #e04848;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-header-bg: rgba(255, 255, 255, 0.9);
  color-scheme: light;
}