@layer tokens, base, drupal, layout, components, utilities;
/* css/tokens.css */

/* Ordre des couches : doit rester la toute première ligne CSS chargée */
@layer tokens, base, drupal, layout, components, utilities;

/* Breakpoints (à recopier dans les @media, var() n'y fonctionne pas)
   sm: 480px · md: 768px · lg: 1024px · xl: 1280px */

@layer tokens {
  :root {
    /* ---------- Couleurs : palette brute ---------- */
    --vert-900: #1f3a1a;
    --vert-700: #2f5a28;
    --vert-500: #1b9455;
    --vert-300: #5dd698;
    --vert-100: #e9fff3;
    --rose-500: #c2185b;
    --bleu-500: #3273d1;
    --marine-900: #1c2747;
    --brun-700: #8b6e56;
    --brun-500: #b19985;
    --gris-900: #222;
    --gris-600: #666;
    --gris-200: #ddd;
    --creme: #fdfcf8;
    --blanc: #fff;

    /* ---------- Couleurs : usages ---------- */
    --couleur-texte: var(--gris-900);
    --couleur-texte-doux: var(--gris-600);
    --couleur-fond: var(--creme);
    --couleur-surface: var(--blanc);
    --couleur-primaire: var(--vert-500);
    --couleur-primaire-fonce: var(--vert-700);
    --couleur-accent: var(--rose-500);
    --couleur-lien: var(--vert-700);
    --couleur-lien-hover: var(--vert-900);
    --couleur-bordure: var(--gris-200);
    --couleur-focus: var(--rose-500);

    /* Logo inline : surcharger ces variables sur un parent pour le recolorer */
    --couleur-mundi: var(--vert-300);
    --couleur-plantarum: var(--vert-500);
    --couleur-sur-mundi: var(--gris-900); /* texte posé sur --couleur-mundi */

    /* ---------- Typo : familles ---------- */
    --font-texte: "Source Sans 3", system-ui, sans-serif;
    --font-titre: "Fraunces", Georgia, serif;
    --font-latin: var(--font-titre); /* noms latins, en italique */

    /* ---------- Typo : tailles fluides ---------- */
    --fs-s: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-l: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
    --fs-xxl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);

    /* ---------- Typo : graisses et interlignes ---------- */
    --fw-normal: 400;
    --fw-semi: 600;
    --fw-bold: 700;
    --lh-serre: 1.15;
    --lh-titre: 1.25;
    --lh-texte: 1.6;

    /* ---------- Espacements ---------- */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-section: clamp(3rem, 2rem + 4vw, 6rem);

    /* ---------- Mise en page ---------- */
    --largeur-max: 75rem;
    --largeur-texte: 65ch;
    --gouttiere: clamp(1rem, 0.5rem + 2vw, 2rem);

    /* ---------- Formes ---------- */
    --radius-s: 0.25rem;
    --radius-m: 0.5rem;
    --radius-l: 1rem;
    --radius-rond: 999px;
    --bordure: 1px solid var(--couleur-bordure);

    /* ---------- Ombres ---------- */
    --ombre-s: 0 1px 2px rgb(0 0 0 / 0.06);
    --ombre-m: 0 4px 12px rgb(0 0 0 / 0.08);
    --ombre-l: 0 12px 32px rgb(0 0 0 / 0.12);

    /* ---------- Animations ---------- */
    --duree-rapide: 150ms;
    --duree-normale: 250ms;
    --easing: cubic-bezier(0.2, 0, 0, 1);

    /* ---------- Superpositions ---------- */
    --z-header: 100;
    --z-menu: 200;
    --z-modale: 1000;
  }

  :root[data-theme="librairie"] {
    --couleur-mundi: var(--brun-500);
    --couleur-plantarum: var(--brun-700);
  }

  :root[data-theme="encyclopedie"] {
    --couleur-mundi: var(--bleu-500);
    --couleur-plantarum: var(--marine-900);
    --couleur-sur-mundi: var(--blanc);
  }
}