/* =====================================================================
   CHARTE GRAPHIQUE — hugocaillaud.com
   ---------------------------------------------------------------------
   Toutes les couleurs, polices, rayons et effets du site sont ici.
   Pour changer l'identité visuelle, ne modifiez que ce fichier.
   - :root               → thème clair (et valeurs communes)
   - [data-theme="dark"] → thème sombre
   Les contrastes ont été choisis pour respecter WCAG AA dans les deux
   thèmes, y compris sur le verre et au-dessus des formes animées.
   ===================================================================== */

/* ---------- Polices auto-hébergées (licence SIL OFL, voir /assets/fonts) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-wght-normal.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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-normal.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: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}

:root {
  /* Typographie */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-base: 1.0625rem;            /* 17 px */
  --leading: 1.65;
  --tracking-label: 0.16em;

  /* Formes */
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Verre */
  --blur: 22px;
  --saturate: 150%;

  /* Mise en page */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space-section: clamp(3.5rem, 8vw, 7rem);

  /* Animation des formes de fond (durées longues = mouvement lent) */
  --blob-duration: 38s;

  /* ---------- Thème clair : « papier chaud » ---------- */
  --bg: #f3efe8;
  --bg-elevated: #fbf9f5;
  --text: #17181c;
  --text-muted: #4b4d55;           /* 7.2:1 sur le fond */
  --accent: #86390a;               /* ambre brûlé : 8.1:1 sur blanc, ≥ 5:1 au-dessus des formes */
  --accent-strong: #6e2f07;
  --on-accent: #ffffff;
  --line: rgba(23, 24, 28, 0.12);

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.9);  /* repli sans backdrop-filter */
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(23, 24, 28, 0.08);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 50px -24px rgba(60, 35, 10, 0.28);

  --blob-1: #f2b27a;   /* ambre */
  --blob-2: #e9a0ad;   /* rose poudré */
  --blob-3: #9ec2e2;   /* bleu brume */
  --blob-4: #cdb9ea;   /* lavande */
  --blob-opacity: 0.55;
  --grain-opacity: 0.05;

  --focus: #0b57d0;
  --selection: rgba(134, 57, 10, 0.2);
  --video-bg: #0e0f13;
}

/* ---------- Thème sombre : « salle de projection » ---------- */
[data-theme="dark"] {
  --bg: #0b0c10;
  --bg-elevated: #14161c;
  --text: #f3f0ea;
  --text-muted: #bcb8b0;           /* 9.6:1 sur le fond */
  --accent: #f0b26b;               /* ambre projecteur */
  --accent-strong: #ffc98a;
  --on-accent: #1b1205;
  --line: rgba(255, 255, 255, 0.12);

  --glass-bg: rgba(20, 22, 29, 0.58);
  --glass-bg-strong: rgba(18, 19, 25, 0.94);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(0, 0, 0, 0.4);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -28px rgba(0, 0, 0, 0.8);

  --blob-1: #b4561f;   /* cuivre */
  --blob-2: #7d2140;   /* grenat */
  --blob-3: #1e4f7a;   /* bleu nuit */
  --blob-4: #4c2c7d;   /* violet */
  --blob-opacity: 0.5;
  --grain-opacity: 0.07;

  --focus: #8ab4ff;
  --selection: rgba(240, 178, 107, 0.3);
}

/* Sans JavaScript : suit la préférence système */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0b0c10;
    --bg-elevated: #14161c;
    --text: #f3f0ea;
    --text-muted: #bcb8b0;
    --accent: #f0b26b;
    --accent-strong: #ffc98a;
    --on-accent: #1b1205;
    --line: rgba(255, 255, 255, 0.12);
    --glass-bg: rgba(20, 22, 29, 0.58);
    --glass-bg-strong: rgba(18, 19, 25, 0.94);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-edge: rgba(0, 0, 0, 0.4);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -28px rgba(0, 0, 0, 0.8);
    --blob-1: #b4561f;
    --blob-2: #7d2140;
    --blob-3: #1e4f7a;
    --blob-4: #4c2c7d;
    --blob-opacity: 0.5;
    --grain-opacity: 0.07;
    --focus: #8ab4ff;
    --selection: rgba(240, 178, 107, 0.3);
  }
}