/* =============================================================================
   Socle — design system commun des sites Patro V2 (direction « Application moderne »)
   Jetons : SEUL fichier qui contient des valeurs brutes. Tout le reste utilise var(--…).

   Remplace « Carnet de veillée » (abandonné le 2026-10-04). « Socle » est un nom technique provisoire, pas une marque.
   Principes : fonds neutres très légèrement teintés de vert, une seule couleur d'action (le vert du Patro, assagi),
   le jaune réservé à de tout petits repères, couleurs d'état réservées au sens, contrastes WCAG 2.2 AA vérifiés
   par outils/contrastes.py (clair ET sombre). Référence : .claude/skills/patro-design/SKILL.md
   ============================================================================= */

:root {
  color-scheme: light;

  /* --- Couleurs du logo (relevées dans commun/marque/source/logo.png) : identité, jamais des fonds d'écran ---- */
  --logo-vert-fonce: #075428;
  --logo-vert-anis: #A3C316;
  --logo-jaune: #FAEA19;
  --couleur-pastille-logo: #FFFFFF;   /* fond clair posé derrière le logo officiel sur les fonds sombres (dessin inchangé) */
  --couleur-papier-impression: #FFFFFF;

  /* --- Neutres (gris très légèrement verts) ------------------------------------ */
  --couleur-fond: #F5F6F5;          /* toile de l'application */
  --couleur-surface: #FFFFFF;       /* cartes, panneaux, barres */
  --couleur-surface-2: #F0F2F1;     /* survol, en-têtes de tableau, zones calmes */
  --couleur-surface-3: #E7EAE8;     /* pistes de jauges, puces neutres pressées */
  --couleur-texte: #141A17;
  --couleur-texte-doux: #5A6560;
  --couleur-texte-faible: #848D88;  /* décoratif uniquement (jamais une information seule) */
  --couleur-bordure: #E2E6E3;
  --couleur-bordure-forte: #CDD3CF;
  --couleur-bordure-champ: #8A9590;

  /* --- Action (vert du Patro, assagi) -------------------------------------------- */
  --couleur-primaire: #16703E;
  --couleur-primaire-survol: #115B32;
  --couleur-sur-primaire: #FFFFFF;
  --couleur-primaire-doux: #E9F4ED;
  --couleur-primaire-bordure: #BFDCC9;
  --couleur-lien: #15683A;

  /* --- Repère discret (jaune du Patro) : point d'activité, sélection, jamais un aplat ---- */
  --couleur-accent: #F2C230;
  --couleur-sur-accent: #1B1A12;
  --couleur-focus: #16703E;

  /* --- États (le mot porte le sens, la couleur l'accompagne) ---------------------- */
  --couleur-succes: #157A3D;
  --couleur-succes-fond: #EAF6EE;
  --couleur-succes-bordure: #B9DFC6;
  --couleur-attention: #985705;
  --couleur-attention-fond: #FDF4E3;
  --couleur-attention-bordure: #F0D3A1;
  --couleur-danger: #B42318;
  --couleur-danger-fond: #FDEEEC;
  --couleur-danger-bordure: #F4C3BD;
  --couleur-danger-plein: #C42B1F;
  --couleur-danger-plein-survol: #A32116;
  --couleur-sur-danger: #FFFFFF;
  --couleur-info: #2552B8;
  --couleur-info-fond: #EEF3FC;
  --couleur-info-bordure: #C6D5F3;

  /* --- Montants (Trésorerie, Mon Espace) : recette en vert, dépense neutre, dû en ambre ---- */
  --couleur-recette: var(--couleur-succes);
  --couleur-depense: var(--couleur-texte);
  --couleur-du: var(--couleur-attention);

  /* --- Profondeur : très légère ; l'ombre forte est réservée à ce qui flotte ------ */
  --ombre-1: 0 1px 2px rgb(16 24 20 / 0.05);
  --ombre-2: 0 12px 32px -12px rgb(16 24 20 / 0.22), 0 2px 6px rgb(16 24 20 / 0.06);
  --ombre-carte: 0 1px 2px rgb(16 24 20 / 0.04), 0 1px 3px rgb(16 24 20 / 0.04);
  --voile: rgb(12 17 15 / 0.42);

  /* --- Typographie : Inter (commun/polices, licence OFL), une seule famille ---------- */
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --taille-xs: 0.75rem;     /* 12 px : étiquettes, métadonnées (minimum) */
  --taille-sm: 0.8125rem;   /* 13 px : texte secondaire, tableaux denses */
  --taille-md: 0.9375rem;   /* 15 px : texte courant */
  --taille-lg: 1.0625rem;   /* 17 px : titres de carte */
  --taille-xl: 1.25rem;     /* 20 px : titres de section */
  --taille-2xl: 1.5rem;     /* 24 px : chiffres clés */
  --taille-titre: clamp(1.375rem, 1.2rem + 0.55vw, 1.75rem);   /* titre de page : 22 → 28 px, jamais géant */
  --interligne: 1.55;
  --interligne-serre: 1.25;
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-forte: 600;
  --approche-titre: -0.015em;

  /* --- Espacements (base 4 px) ----------------------------------------------------- */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;
  --espace-7: 3rem;
  --espace-8: 4rem;

  /* --- Formes ------------------------------------------------------------------------ */
  --rayon-petit: 6px;
  --rayon: 8px;
  --rayon-grand: 12px;
  --rayon-plein: 999px;
  --epaisseur-focus: 2px;
  --epaisseur-liseret: 1px;

  /* --- Cibles : 40 px au pointeur fin, 44 px et plus au doigt (jamais moins) -------- */
  --cible-min: 44px;
  --cible-confort: 40px;
  --cible-grande: 48px;
  --hauteur-ligne: 44px;

  /* --- Mouvement : court, sobre, une seule courbe ----------------------------------- */
  --duree-rapide: 120ms;
  --duree: 180ms;
  --duree-lente: 260ms;
  --courbe-sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --courbe-entree-sortie: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Mise en page ------------------------------------------------------------------ */
  --largeur-texte: 68ch;
  --largeur-page: 1240px;
  --largeur-barre-laterale: 248px;
  --hauteur-barre: 56px;
  --hauteur-onglets: 60px;   /* barre d'onglets du bas (téléphone, tablette) ; 0 dès 1024 px (coquille.css) */
  --gouttiere: max(var(--espace-4), env(safe-area-inset-left));
}

@media (pointer: coarse) {
  :root { --cible-confort: 44px; --cible-grande: 52px; --hauteur-ligne: 48px; }
}

/* --- Thème sombre : choix manuel ------------------------------------------------
   Les deux blocs SOMBRE doivent rester IDENTIQUES (vérifié par outils/commun.sh verifier). */
:root[data-theme="dark"] {
  /* SOMBRE:DEBUT */
  color-scheme: dark;
  --couleur-fond: #0B0E0D;
  --couleur-surface: #131816;
  --couleur-surface-2: #1A201D;
  --couleur-surface-3: #232A27;
  --couleur-texte: #E8ECEA;
  --couleur-texte-doux: #9DA7A2;
  --couleur-texte-faible: #6F7974;
  --couleur-bordure: #252C29;
  --couleur-bordure-forte: #343D39;
  --couleur-bordure-champ: #66716B;
  --couleur-primaire: #5BC489;
  --couleur-primaire-survol: #74D09C;
  --couleur-sur-primaire: #06180E;
  --couleur-primaire-doux: #14271C;
  --couleur-primaire-bordure: #22472F;
  --couleur-lien: #70CE98;
  --couleur-accent: #F2CD4B;
  --couleur-sur-accent: #1B1A12;
  --couleur-focus: #74D09C;
  --couleur-succes: #63CF8D;
  --couleur-succes-fond: #10241A;
  --couleur-succes-bordure: #1F4831;
  --couleur-attention: #EDB55A;
  --couleur-attention-fond: #2A2011;
  --couleur-attention-bordure: #574119;
  --couleur-danger: #F28B80;
  --couleur-danger-fond: #2C1614;
  --couleur-danger-bordure: #5C2B26;
  --couleur-danger-plein: #D2392D;
  --couleur-danger-plein-survol: #B52D22;
  --couleur-sur-danger: #FFFFFF;
  --couleur-info: #92B4F5;
  --couleur-info-fond: #131D30;
  --couleur-info-bordure: #2B3F66;
  --ombre-1: 0 0 0 1px rgb(255 255 255 / 0.03);
  --ombre-2: 0 16px 40px -12px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.05);
  --ombre-carte: 0 0 0 1px rgb(255 255 255 / 0.02);
  --voile: rgb(0 0 0 / 0.62);
  /* SOMBRE:FIN */
}

/* --- Thème sombre : réglage de l'appareil (sauf choix manuel « clair ») ----------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* SOMBRE:DEBUT */
    color-scheme: dark;
    --couleur-fond: #0B0E0D;
    --couleur-surface: #131816;
    --couleur-surface-2: #1A201D;
    --couleur-surface-3: #232A27;
    --couleur-texte: #E8ECEA;
    --couleur-texte-doux: #9DA7A2;
    --couleur-texte-faible: #6F7974;
    --couleur-bordure: #252C29;
    --couleur-bordure-forte: #343D39;
    --couleur-bordure-champ: #66716B;
    --couleur-primaire: #5BC489;
    --couleur-primaire-survol: #74D09C;
    --couleur-sur-primaire: #06180E;
    --couleur-primaire-doux: #14271C;
    --couleur-primaire-bordure: #22472F;
    --couleur-lien: #70CE98;
    --couleur-accent: #F2CD4B;
    --couleur-sur-accent: #1B1A12;
    --couleur-focus: #74D09C;
    --couleur-succes: #63CF8D;
    --couleur-succes-fond: #10241A;
    --couleur-succes-bordure: #1F4831;
    --couleur-attention: #EDB55A;
    --couleur-attention-fond: #2A2011;
    --couleur-attention-bordure: #574119;
    --couleur-danger: #F28B80;
    --couleur-danger-fond: #2C1614;
    --couleur-danger-bordure: #5C2B26;
    --couleur-danger-plein: #D2392D;
    --couleur-danger-plein-survol: #B52D22;
    --couleur-sur-danger: #FFFFFF;
    --couleur-info: #92B4F5;
    --couleur-info-fond: #131D30;
    --couleur-info-bordure: #2B3F66;
    --ombre-1: 0 0 0 1px rgb(255 255 255 / 0.03);
    --ombre-2: 0 16px 40px -12px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.05);
    --ombre-carte: 0 0 0 1px rgb(255 255 255 / 0.02);
    --voile: rgb(0 0 0 / 0.62);
    /* SOMBRE:FIN */
  }
}

/* --- Réduction des animations demandée par l'appareil ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-rapide: 1ms;
    --duree: 1ms;
    --duree-lente: 1ms;
  }
}