/*
  Jetons de design de Clairfolio.
  Sources : branding/Docs/direction-artistique-clairfolio.md §2 et §4 (couleurs et contrastes),
  §5 (typographie) ; palette étendue définie au palier 1 (contrastes calculés, voir tools/banc-d-essai/test.html).

  RÈGLE : aucune couleur en dur ailleurs que dans ce fichier.

  ATTENTION : les valeurs du thème sombre existent à DEUX endroits dans ce fichier :
    1. @media (prefers-color-scheme: dark) { :root { ... } }  (le navigateur est en mode sombre)
    2. .on-dark { ... }  (une section sombre dans une page claire : pied de page, appel final)
  Toute modification d'une valeur sombre se fait aux deux endroits, sinon le rendu diverge.
*/

:root {
  color-scheme: light dark;

  /* ---- Couleurs de marque (primitives) ---- */
  --color-blue: #2457ff;
  --color-green: #c8ff3d;
  --color-navy: #080f22;
  --color-ivory: #f8f8f6;

  /* Décors : formes uniquement, jamais du texte ni un trait fin porteur de sens */
  --decor-blue: var(--color-blue);
  --decor-green: var(--color-green);

  /* ---- Rôles, thème clair (par défaut) ---- */
  --bg: var(--color-ivory);
  --text: var(--color-navy);
  --text-muted: #4a5266;            /* 7,34:1 sur ivoire */
  --surface: #eeeeea;               /* fond de carte, décor : le texte dessus reste >= 4,5:1 */
  --link: var(--color-blue);        /* 5,09:1 sur ivoire */
  --link-hover: #1b45d6;            /* 6,88:1 sur ivoire */
  --action-bg: var(--color-blue);   /* bouton principal */
  --action-bg-hover: #1b45d6;
  --action-bg-pressed: #1636a8;
  --action-text: var(--color-ivory);/* 5,09:1 sur bleu */
  --border-subtle: rgb(8 15 34 / 0.15);   /* séparateurs décoratifs */
  --border-control: rgb(8 15 34 / 0.5);   /* champs et composants : 3,53:1 */
  --focus: var(--color-blue);       /* contour de focus : 5,09:1 */
  --error: #b42318;                 /* 6,18:1 sur ivoire */
  --success: #166534;               /* 6,71:1 */
  --warning: #b45309;               /* 4,72:1 sur ivoire ; ambre */

  /* ---- Typographie ---- */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-heading: 800;
  --weight-body: 400;
  --weight-strong: 600;             /* gras du texte courant et boutons (décision du guide Voix) */

  --step-small: 0.875rem;                                   /* 14 px : légendes, mentions */
  --step-body: 1rem;                                        /* 16 px */
  --step-lead: 1.125rem;                                    /* 18 px */
  --step-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20 à 24 px */
  --step-h2: clamp(1.75rem, 1.6rem + 0.75vw, 2rem);         /* 28 à 32 px */
  --step-h1: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);           /* 40 à 56 px */
  --leading-body: 1.5;
  --leading-small: 1.4;
  --leading-h1: 1.1;
  --leading-h2: 1.2;
  --leading-h3: 1.3;

  /* ---- Espacements, rayons, durées ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --measure: 70ch;                  /* longueur de ligne : 60 à 75 caractères */
  --container: 72rem;
  --gutter: 1rem;
  --target: 2.75rem;                /* zone cliquable minimale : 44 px */
  --duration-fast: 0.15s;
}

/* 1. Le navigateur est en mode sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--color-navy);
    --text: var(--color-ivory);
    --text-muted: #b4b9c6;          /* 9,71:1 sur marine */
    --surface: #111a33;
    --link: var(--color-green);     /* 16,18:1 sur marine */
    --link-hover: #d9ff75;
    --action-bg: var(--color-green);
    --action-bg-hover: #d9ff75;
    --action-bg-pressed: #8cbb1c;
    --action-text: var(--color-navy);
    --border-subtle: rgb(248 248 246 / 0.15);
    --border-control: rgb(248 248 246 / 0.5);   /* 5,08:1 sur marine */
    --focus: var(--color-green);
    --error: #ff8a7a;               /* 8,32:1 sur marine */
    --success: #6ee7a0;             /* 12,34:1 */
    --warning: #fbbf24;             /* 11,42:1 */
  }
}

/* 2. Une section sombre, quel que soit le mode du navigateur (mêmes valeurs que ci-dessus) */
.on-dark {
  color-scheme: dark;
  --bg: var(--color-navy);
  --text: var(--color-ivory);
  --text-muted: #b4b9c6;
  --surface: #111a33;
  --link: var(--color-green);
  --link-hover: #d9ff75;
  --action-bg: var(--color-green);
  --action-bg-hover: #d9ff75;
  --action-bg-pressed: #8cbb1c;
  --action-text: var(--color-navy);
  --border-subtle: rgb(248 248 246 / 0.15);
  --border-control: rgb(248 248 246 / 0.5);
  --focus: var(--color-green);
  --error: #ff8a7a;
  --success: #6ee7a0;
  --warning: #fbbf24;
}