/* ============================================================================
   UCE — Design tokens
   Deux palettes complètes (clair / sombre) pensées séparément : le sombre
   n'est pas une inversion du clair, c'est un bleu nuit profond avec ses
   propres surfaces, bordures et accents.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/newsreader-latin.woff2") format("woff2-variations"),
       url("../assets/fonts/newsreader-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;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/newsreader-latin-italic.woff2") format("woff2-variations"),
       url("../assets/fonts/newsreader-latin-italic.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;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-latin.woff2") format("woff2-variations"),
       url("../assets/fonts/hanken-grotesk-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;
}

:root {
  /* Typographie */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique (ratio ~1.25, fluide) */
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.42rem, 1.26rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.3vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.7rem + 2.3vw, 3.7rem);
  --step-5: clamp(2.6rem, 1.8rem + 3.6vw, 5.2rem);

  /* Espacements */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --space-2xl: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  --container: 1240px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
  --header-h: 76px;

  /* Rayons : hiérarchisés, pas un rayon unique partout */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;

  /* Mouvement */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-s: 180ms;
  --dur-m: 360ms;
  --dur-l: 720ms;

  /* Couleurs de marque, fixes quel que soit le thème */
  --uce-blue: #0E3F9C;
  --uce-navy: #071634;
  --uce-abyss: #040B1E;
  --uce-ice: #CFE0FF;

  /* ---------- Thème clair (par défaut) ---------- */
  --bg: #F4F6FA;
  --bg-alt: #E9EEF7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FD;
  --ink: #0A1733;
  --ink-2: #414D68;
  --ink-3: #6B7690;
  --line: #D6DEEB;
  --line-strong: #B7C4DA;
  --brand: #0E3F9C;
  --brand-hi: #2A63D6;
  --brand-soft: #E3ECFC;
  --brand-ink: #FFFFFF;
  --focus: #2A63D6;
  --danger: #B42318;
  --success: #0F7A4C;

  --shadow-1: 0 1px 2px rgba(10, 23, 51, 0.05), 0 2px 8px rgba(10, 23, 51, 0.04);
  --shadow-2: 0 2px 6px rgba(10, 23, 51, 0.05), 0 18px 40px -18px rgba(14, 63, 156, 0.28);
  --shadow-3: 0 30px 80px -30px rgba(7, 22, 52, 0.45);

  --glass: rgba(244, 246, 250, 0.78);
  --hatch: rgba(14, 63, 156, 0.16);
  --pattern: rgba(14, 63, 156, 0.07);

  /* Bandeau profond (contentieux, footer) : bleu nuit dans les deux thèmes */
  --deep-bg: #071634;
  --deep-bg-2: #0B2152;
  --deep-ink: #EAF0FB;
  --deep-ink-2: #A9B8D6;
  --deep-line: rgba(169, 184, 214, 0.18);
  --deep-accent: #8DB2FF;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #060F24;
  --bg-alt: #091631;
  --surface: #0D1B3A;
  --surface-2: #0B1832;
  --ink: #E8EEF9;
  --ink-2: #A3B1CC;
  --ink-3: #7C8BA9;
  --line: #1B2B50;
  --line-strong: #2A3E6B;
  --brand: #7DA6FF;
  --brand-hi: #A9C4FF;
  --brand-soft: #13254D;
  --brand-ink: #06122B;
  --focus: #A9C4FF;
  --danger: #FF8A80;
  --success: #5DD3A0;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 22px 50px -22px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 30px 90px -30px rgba(0, 0, 0, 0.8);

  --glass: rgba(6, 15, 36, 0.72);
  --hatch: rgba(125, 166, 255, 0.2);
  --pattern: rgba(125, 166, 255, 0.07);

  --deep-bg: #030A1C;
  --deep-bg-2: #0A1E4A;

  color-scheme: dark;
}