/* Design tokens — the only place where colours, fonts and radii are defined.
   Used by the whole site: website, questionnaire, studio and client space.
   Reference: 🎤 Communication/Identite visuelle/Charte graphique.html

   Two themes:
     Day   (beige / indigo)                 <html data-theme="day">
     Night (Prussian blue / beige)          <html data-theme="night">
   Without data-theme, the visitor's system setting decides.

   Brand palette — Space Indigo, Prussian Blue, Beige, Light Bronze, Dusty Rose:
     --accent  Rose profond : the one action colour (buttons, links, progress). Darker than
               Dusty Rose so that white text on it stays readable.
     --pop     Dusty Rose : signature. Big numbers, highlights, loader. Large sizes only.
     --sun     Light Bronze : warm touches (badges, avatars, CTA band). Indigo text on it.
     --violet  Space Indigo : depth in gradients. */
:root, .tp[data-theme="day"] {
  /* Raw brand palette — identical in both themes */
  --brand-indigo: #151E3F;
  --brand-prussian: #030027;
  --brand-beige: #F2F3D9;
  --brand-bronze: #DC9E82;
  --brand-rose: #C16E70;

  /* Day */
  --bg: #FAFAF0;
  --surface: #FFFFFF;
  --sunk: #F2F3D9;
  --ink: #151E3F;
  --muted: #5A6080;
  --line: #E3E2C8;

  --accent: #A5545A;
  --accent-hover: #8F474D;
  --accent-soft: #F6E4E2;
  --on-accent: #FFFFFF;
  --pop: #C16E70;
  --pop-soft: #F6E4E2;
  --sun: #DC9E82;
  --on-sun: #151E3F;
  --violet: #151E3F;

  --ok: #3E7B5C;       --ok-soft: #E2EFE6;
  --ochre: #8C5A3E;    --ochre-soft: #F8E7DD;
  --danger: #B23A3A;   --danger-soft: #F7E0DE;
  --info: #151E3F;     --info-soft: #E4E6EF;

  --shadow: 0 1px 2px rgba(21, 30, 63, .06), 0 6px 16px rgba(21, 30, 63, .08);
  --shadow-hi: 0 2px 4px rgba(21, 30, 63, .08), 0 14px 32px rgba(21, 30, 63, .14);

  /* Fonts: titles in Marshi Sans, the rest in Nunito */
  --font: "Nunito", ui-rounded, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Marshi Sans", "Nunito", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r: 16px;
  --r-sm: 10px;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --bg: #030027; --surface: #151E3F; --sunk: #0B0E33; --ink: #F2F3D9; --muted: #A9AAC0; --line: #262F55;
    --accent: #D98E90; --accent-hover: #E6A6A7; --accent-soft: #3A2238; --on-accent: #030027;
    --pop: #E8A3A4; --pop-soft: #3A2238; --sun: #DC9E82; --on-sun: #030027; --violet: #3A4470;
    --ok: #7CC7A0; --ok-soft: #12302A; --ochre: #DC9E82; --ochre-soft: #33233A;
    --danger: #F08C84; --danger-soft: #3A1A24; --info: #A9AAC0; --info-soft: #1E2650;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .45);
    --shadow-hi: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="night"], .tp[data-theme="night"] {
  --bg: #030027; --surface: #151E3F; --sunk: #0B0E33; --ink: #F2F3D9; --muted: #A9AAC0; --line: #262F55;
  --accent: #D98E90; --accent-hover: #E6A6A7; --accent-soft: #3A2238; --on-accent: #030027;
  --pop: #E8A3A4; --pop-soft: #3A2238; --sun: #DC9E82; --on-sun: #030027; --violet: #3A4470;
  --ok: #7CC7A0; --ok-soft: #12302A; --ochre: #DC9E82; --ochre-soft: #33233A;
  --danger: #F08C84; --danger-soft: #3A1A24; --info: #A9AAC0; --info-soft: #1E2650;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .45);
  --shadow-hi: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .6);
  color-scheme: dark;
}