/* ═══════════════════════════════════════════════════════════════
   CHARTE ANIMOSTEO — thème partagé
   ---------------------------------------------------------------
   Source unique des couleurs, typographies, rayons et ombres.
   Utilisé par : Clinique Pédagogique (index.html, inliné dans <style>)
                 et destiné à l'application Patient (Symfony/Twig).

   Polices requises (Google Fonts) :
   <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap" rel="stylesheet">

   Le thème sombre s'active de deux façons :
     - automatiquement   : préférence système (prefers-color-scheme)
     - explicitement     : attribut data-theme="dark" sur <html>
   =============================================================== */

:root,[data-theme="light"]{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;

  /* Surfaces — papier chaud, cartes blanches */
  --color-bg:#faf8f5;--color-surface:#ffffff;--color-surface-2:#ffffff;
  --color-surface-offset:#f4f1ec;--color-surface-offset-2:#eeeae4;
  --color-surface-dynamic:#e3ded6;--color-divider:#efeae2;--color-border:#e7e2da;

  /* Texte */
  --color-text:#1a1a1a;--color-text-muted:#5b6b73;--color-text-faint:#a9b4b9;
  --color-text-inverse:#ffffff;
  --color-heading:#24465c;

  /* Bleu foncé — base dominante : titres, nav, états sélectionnés, focus */
  --color-primary:#24465c;--color-primary-hover:#1b3648;--color-primary-active:#142a39;
  --color-primary-highlight:#e8edf0;

  /* Orange — accent ponctuel : actions principales */
  --color-accent:#ef6c00;--color-accent-hover:#d35f00;--color-accent-highlight:#fdece0;

  /* Menthe — secondaire. --color-mint = teinte de charte (décoratif),
     --color-clinic = version approfondie, lisible en texte (AA). */
  --color-mint:#4db6ac;
  --color-clinic:#27796f;--color-clinic-hover:#1f6a61;--color-clinic-highlight:#e7f5f3;

  /* États */
  --color-success:#27796f;--color-success-hover:#1f6a61;--color-success-highlight:#e7f5f3;
  --color-error:#a3372a;--color-error-highlight:#fbe6e3;
  --color-warning:#a94e00;--color-warning-highlight:#fdece0;

  /* Espèces et types de consultation */
  --color-dog:#24465c;--color-dog-hover:#1b3648;--color-dog-highlight:#e8edf0;
  --color-cat:#27796f;--color-cat-hover:#1f6a61;--color-cat-highlight:#e7f5f3;
  --color-cnov:#a94e00;--color-cnov-hover:#8f4200;--color-cnov-highlight:#fdece0;

  /* Formes */
  --radius-sm:.5rem;--radius-md:.75rem;--radius-lg:.875rem;--radius-xl:1.125rem;--radius-full:9999px;
  --transition:240ms cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(36,70,92,.04);
  --shadow-md:0 1px 2px rgba(36,70,92,.04),0 8px 24px -8px rgba(36,70,92,.12);
  --shadow-lg:0 2px 4px rgba(36,70,92,.06),0 20px 40px -12px rgba(36,70,92,.18);

  --font-body:'Mulish',system-ui,sans-serif;
  --font-display:'Fraunces',Georgia,serif;
  --content-narrow:640px;--content-default:1000px;
}

/* Variante sombre dérivée de la charte : le bleu foncé devient le fond,
   menthe et orange sont remontés en luminosité pour rester lisibles. */
[data-theme="dark"]{
  --color-bg:#131f27;--color-surface:#18262f;--color-surface-2:#1c2c36;
  --color-surface-offset:#1f303b;--color-surface-offset-2:#243844;
  --color-surface-dynamic:#2b4150;--color-divider:#22343f;--color-border:#2f4756;
  --color-text:#e2e8ea;--color-text-muted:#93a6b0;--color-text-faint:#647885;
  --color-text-inverse:#10202b;
  --color-heading:#cfe0e8;
  --color-primary:#6aa9cc;--color-primary-hover:#86bcda;--color-primary-active:#9dcbe4;
  --color-primary-highlight:#1e3a4d;
  --color-accent:#ff8a3d;--color-accent-hover:#ffa063;--color-accent-highlight:#3a2415;
  --color-mint:#5ecfc3;
  --color-clinic:#5ecfc3;--color-clinic-hover:#7ddcd2;--color-clinic-highlight:#14332f;
  --color-success:#5ecfc3;--color-success-hover:#7ddcd2;--color-success-highlight:#14332f;
  --color-error:#ff8477;--color-error-highlight:#3d211d;
  --color-warning:#ffa552;--color-warning-highlight:#3a2415;
  --color-dog:#7fb4d6;--color-dog-hover:#9bc7e2;--color-dog-highlight:#1c3346;
  --color-cat:#5ecfc3;--color-cat-hover:#7ddcd2;--color-cat-highlight:#14332f;
  --color-cnov:#ff9d4d;--color-cnov-hover:#ffb173;--color-cnov-highlight:#3a2415;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 12px 32px rgba(0,0,0,.45);
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#131f27;--color-surface:#18262f;--color-surface-2:#1c2c36;
  --color-surface-offset:#1f303b;--color-surface-offset-2:#243844;
  --color-surface-dynamic:#2b4150;--color-divider:#22343f;--color-border:#2f4756;
  --color-text:#e2e8ea;--color-text-muted:#93a6b0;--color-text-faint:#647885;
  --color-text-inverse:#10202b;
  --color-heading:#cfe0e8;
  --color-primary:#6aa9cc;--color-primary-hover:#86bcda;--color-primary-active:#9dcbe4;
  --color-primary-highlight:#1e3a4d;
  --color-accent:#ff8a3d;--color-accent-hover:#ffa063;--color-accent-highlight:#3a2415;
  --color-mint:#5ecfc3;
  --color-clinic:#5ecfc3;--color-clinic-hover:#7ddcd2;--color-clinic-highlight:#14332f;
  --color-success:#5ecfc3;--color-success-hover:#7ddcd2;--color-success-highlight:#14332f;
  --color-error:#ff8477;--color-error-highlight:#3d211d;
  --color-warning:#ffa552;--color-warning-highlight:#3a2415;
  --color-dog:#7fb4d6;--color-dog-hover:#9bc7e2;--color-dog-highlight:#1c3346;
  --color-cat:#5ecfc3;--color-cat-hover:#7ddcd2;--color-cat-highlight:#14332f;
  --color-cnov:#ff9d4d;--color-cnov-hover:#ffb173;--color-cnov-highlight:#3a2415;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 12px 32px rgba(0,0,0,.45);
}}