/* ==========================================================================
   variables.css
   Charte + tokens UI (couleurs, typographies, espacements, rayons, ombres)
   NOTE: Les polices du kit PS (Marianne) seront chargées en local via @font-face
   dans ce fichier (chemins à ajuster selon les fichiers fournis).
   ========================================================================== */

/* -----------------------------
   1) Font faces (local)
   ----------------------------- */

/* Marianne (kit PS) — Titres
   Placez vos fichiers dans: /assets/fonts/marianne/
   Exemples de noms: Marianne-Regular.woff2, Marianne-Bold.woff2 ...
   Ajustez les URLs selon les fichiers exacts du kit. */

@font-face {
  font-family: "Marianne";
  src: url("../assets/fonts/marianne/Marianne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

/* Inter — Texte (fallback moderne)
   Option A: héberger Inter en local (recommandé RGPD) : /assets/fonts/inter/
   Option B: supprimer ces @font-face si vous chargez Inter autrement. */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

/* -----------------------------
   2) Design tokens (CSS variables)
   ----------------------------- */

:root {
  /* Typography */
  --font-title: "Marianne", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Font sizes (fluid-ish, without clamp to keep it simple) */
  --text-xs: 0.8125rem;  /* 13px */
  --text-sm: 0.9375rem;  /* 15px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px */

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  /* Font weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Colors — base */
  --c-white: #ffffff;
  --c-black: #0b0b0f;
  --c-ink: #141421;      /* texte principal */
  --c-muted: #5b5b6b;    /* texte secondaire */
  --c-border: #e7e4ee;   /* séparateurs */
  --c-surface: #ffffff;  /* fond cartes */
  --c-surface-2: #f4f5f7; /* fond footer clair */
  --c-bg: #ffffff;       /* fond global */

  /* Campaign accents (inspirés kit PS, sans sur-usage partisan)
     Ajustables après validation visuelle. */
  --c-rose: #e1007a;        /* accent principal */
  --c-rose-600: #c40069;    /* hover */
  --c-rose-100: #ffe6f3;    /* fond très léger */
  --c-yellow: #ffcc00;      /* accent secondaire, parcimonieux */
  --c-yellow-100: #fff4cc;  /* fond léger */

  /* Charte (noms explicites)
     - magenta web : interface
     - magenta print : documents / PDF (plus profond)
     - jaune accent : touches / surlignages
     - jaune titrage : encadrés / titres */
  --magenta-web: var(--c-rose);
  --magenta-print: #c40069;
  --jaune-accent: var(--c-yellow);
  --jaune-titrage: #ffcc00;
  --rose-light: var(--c-rose-100);
  --jaune-light: var(--c-yellow-100);
  --c-success: #1a7f37;     /* si besoin (messages) */
  --c-danger: #c81e1e;      /* erreurs (à utiliser très rarement) */

  /* Links */
  --c-link: var(--c-rose);

  /* Aliases utilisés par certains composants (legacy)
     Objectif : éviter des variables non définies (ex: --c-primary, --c-text)
     sans figer une charte : on mappe sur les tokens actuels. */
  --c-primary: var(--c-rose);
  --c-primary-dark: var(--c-rose-600);
  --c-primary-soft: var(--c-rose-100);
  --c-text: var(--c-ink);
  --c-text-muted: var(--c-muted);
  --c-link-hover: var(--c-rose-600);

  /* Buttons */
  --btn-bg: var(--c-rose);
  --btn-bg-hover: var(--c-rose-600);
  --btn-fg: var(--c-white);

  --btn-secondary-bg: var(--c-white);
  --btn-secondary-fg: var(--c-ink);
  --btn-secondary-border: var(--c-border);

  --btn-tertiary-bg: transparent;
  --btn-tertiary-fg: var(--c-ink);
  --btn-tertiary-border: var(--c-border);

  /* Section backgrounds */
  --section-alt-bg: #fbf9fd;      /* très léger */
  --section-ambitions-bg: var(--c-rose-100);

  /* Spacing scale */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-7: 2rem;     /* 32 */
  --space-8: 2.5rem;   /* 40 */
  --space-9: 3rem;     /* 48 */
  --space-10: 4rem;    /* 64 */

  /* Layout */
  --container-max: 1120px;
  --container-pad: 1rem;

  /* Radii */
  --radius-sm: 0.5rem;   /* 8 */
  --radius-md: 0.75rem;  /* 12 */
  --radius-lg: 1rem;     /* 16 */
  --radius-xl: 1.25rem;  /* 20 */

  /* Shadows (soft) */
  --shadow-sm: 0 1px 2px rgba(10, 10, 20, 0.06);
  --shadow-md: 0 8px 20px rgba(10, 10, 20, 0.08);
  --shadow-lg: 0 18px 40px rgba(10, 10, 20, 0.10);

  /* Borders */
  --border-1: 1px solid var(--c-border);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(225, 0, 122, 0.25);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;

  /* Header */
  --header-h: 72px;

  /* Z-index */
  --z-header: 1000;
  --z-menu: 1100;
  --z-tooltip: 1200;
}

/* -----------------------------
   3) Dark mode (optionnel)
   Gardé en réserve, non activé.
   ----------------------------- */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0b0b0f;
    --c-surface: #141421;
    --c-ink: #f3f2f7;
    --c-muted: #c7c6d2;
    --c-border: rgba(255,255,255,0.12);
    --section-alt-bg: #0f0f16;
    --section-ambitions-bg: rgba(225, 0, 122, 0.12);
  }
}
*/