/*
 * Soinora — charte « Terre & Sauge », jetons pour le site.
 * Valeurs reprises à l'identique de l'app (app/lib/core/ui/tokens.dart) et du design system.
 * Thème clair par défaut, sombre selon le système, ou forcé par data-theme="light|dark" sur <html>.
 */

/* ---- Polices auto-hébergées (sous-ensemble latin, woff2) ---------------------------------- */
@font-face { font-family: "Fraunces"; src: url("/polices/Fraunces-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/polices/Fraunces-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/polices/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/polices/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/polices/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/polices/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* Familles */
  --police-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --police-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Plans */
  --fond: #f7f3ee;            /* Lin : fond de page */
  --surface: #ffffff;         /* cartes, en-tête, fenêtres */
  --surface-alt: #f1ece5;     /* Sable : champs, bandes alternées, pistes */
  --trait: #e5ddd3;           /* Grège : filet des cartes, séparateurs */
  --contour: #8f847a;         /* Taupe : contour des champs et boutons contour (≥ 3:1) */

  /* Texte */
  --encre: #1d1916;
  --encre-douce: #5e554d;
  --encre-discrete: #736a62;

  /* Action principale */
  --terracotta: #a8471f;
  --terracotta-contraste: #ffffff;
  --terracotta-doux: #f6e2d7; /* Pêche */
  --terracotta-encre: #5a2410;

  /* Couleurs de sens */
  --sauge: #3d6b55;   --sauge-contraste: #ffffff;   --sauge-doux: #dceae1;   --sauge-encre: #173a2a;
  --ambre: #9a5b00;   --ambre-contraste: #ffffff;   --ambre-doux: #fcefd9;   --ambre-encre: #8a4f00;
  --rouge: #b3261e;   --rouge-contraste: #ffffff;   --rouge-doux: #fbe3e1;   --rouge-encre: #8c1d18;
  --ardoise: #36597a; --ardoise-contraste: #ffffff; --ardoise-doux: #e0eaf3; --ardoise-encre: #1d3a55;
  --prune: #7b4b6a;                                 --prune-doux: #f1e4ec;   --prune-encre: #5a2f4b;
  --neutre-doux: #efebe6; --neutre-encre: #5e554d;

  /* Dégradé Aube : une seule fois par écran */
  --aube-debut: #8f3a17;
  --aube-milieu: #a8471f;
  --aube-fin: #b85a33;
  --aube-texte: #ffffff;
  --aube-halo: rgba(216, 164, 143, 0.45);
  --aube: linear-gradient(to bottom right, var(--aube-debut) 0%, var(--aube-milieu) 55%, var(--aube-fin) 100%);

  /* Graphiques */
  --graphe-1: var(--terracotta); --graphe-2: var(--sauge); --graphe-3: var(--ardoise);
  --graphe-4: #b7791f; --graphe-5: var(--prune); --graphe-6: #8f847a;

  /* Focus, voile, ombres (design plat : ombres au survol et pour ce qui flotte) */
  --focus: var(--terracotta);
  --voile: rgba(29, 25, 22, 0.32);
  --ombre-survol: 0 4px 16px #1d191614;
  --ombre-flottante: 0 16px 48px #1d19162e;
  --ombre-appareil: 0 24px 64px #3a14052e, 0 4px 16px #1d191614; /* captures dans leur cadre (site uniquement) */
  --anneau-focus: 0 0 0 2px var(--fond), 0 0 0 4px var(--focus);

  /* Espaces (grille de 4 px) */
  --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px;
  --espace-6: 24px; --espace-8: 32px; --espace-12: 48px;
  --espace-16: 64px; --espace-24: 96px; --espace-32: 128px; /* respirations du site */

  /* Rayons */
  --rayon-bloc: 6px;
  --rayon-champ: 14px;
  --rayon-carte: 20px;
  --rayon-fenetre: 28px;
  --rayon-pilule: 9999px;

  /* Mouvement */
  --duree-courte: 120ms;
  --duree-moyenne: 220ms;
  --duree-longue: 320ms;
  --duree-comptage: 600ms;
  --courbe-sortie: cubic-bezier(0.33, 1, 0.68, 1);

  /* Largeurs */
  --largeur-texte: 640px;
  --largeur-contenu: 1200px;
  --largeur-large: 1360px;
  --hauteur-bouton: 48px;
  --hauteur-bouton-grand: 56px;

  /* Échelle typographique du site (agrandie par rapport à l'app pour les titres) */
  --texte-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);      /* 40 → 72 px, Fraunces 500 */
  --texte-h2: clamp(2rem, 1.5rem + 2vw, 3rem);               /* 32 → 48 px, Fraunces 500 */
  --texte-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);      /* 22 → 28 px, Fraunces 500 */
  --texte-titre-carte: 1.25rem;                              /* 20 px, Inter 600 */
  --texte-chapo: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21 px, Inter 400 */
  --texte-corps: 1.0625rem;                                  /* 17 px */
  --texte-detail: 0.875rem;                                  /* 14 px */
  --texte-surtitre: 0.75rem;                                 /* 12 px, Inter 600, majuscules, +0.06em */
}

/* Thème sombre : selon le système, sauf choix explicite du clair */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #15110f; --surface: #1f1a17; --surface-alt: #2a2420; --trait: #3b332d; --contour: #75695f;
    --encre: #f4eee8; --encre-douce: #bdb2a7; --encre-discrete: #9c9086;
    --terracotta: #e88a62; --terracotta-contraste: #3a1405; --terracotta-doux: #4a2415; --terracotta-encre: #ffd9c8;
    --sauge: #86bfa0; --sauge-contraste: #0f2419; --sauge-doux: #1e3a2c; --sauge-encre: #cdebd9;
    --ambre: #f0b458; --ambre-contraste: #2e1d00; --ambre-doux: #4a3300; --ambre-encre: #ffe0a8;
    --rouge: #ff8a80; --rouge-contraste: #3b0906; --rouge-doux: #5c1a16; --rouge-encre: #ffdad6;
    --ardoise: #8db4d8; --ardoise-contraste: #0e2233; --ardoise-doux: #1d3246; --ardoise-encre: #d3e4f5;
    --prune: #c99bb8; --prune-doux: #3a2031; --prune-encre: #f2d7e7;
    --neutre-doux: #2a2420; --neutre-encre: #bdb2a7;
    --aube-debut: #6e2a10; --aube-milieu: #8f3a17; --aube-fin: #a8471f; --aube-halo: rgba(207, 154, 132, 0.45);
    --graphe-4: #e3a43a; --graphe-6: #a89b8e;
    --voile: rgba(0, 0, 0, 0.56);
    --ombre-survol: 0 4px 16px #00000066;
    --ombre-flottante: 0 16px 48px #000000b3;
    --ombre-appareil: 0 24px 64px #000000b3;
  }
}
:root[data-theme="dark"] {
  --fond: #15110f; --surface: #1f1a17; --surface-alt: #2a2420; --trait: #3b332d; --contour: #75695f;
  --encre: #f4eee8; --encre-douce: #bdb2a7; --encre-discrete: #9c9086;
  --terracotta: #e88a62; --terracotta-contraste: #3a1405; --terracotta-doux: #4a2415; --terracotta-encre: #ffd9c8;
  --sauge: #86bfa0; --sauge-contraste: #0f2419; --sauge-doux: #1e3a2c; --sauge-encre: #cdebd9;
  --ambre: #f0b458; --ambre-contraste: #2e1d00; --ambre-doux: #4a3300; --ambre-encre: #ffe0a8;
  --rouge: #ff8a80; --rouge-contraste: #3b0906; --rouge-doux: #5c1a16; --rouge-encre: #ffdad6;
  --ardoise: #8db4d8; --ardoise-contraste: #0e2233; --ardoise-doux: #1d3246; --ardoise-encre: #d3e4f5;
  --prune: #c99bb8; --prune-doux: #3a2031; --prune-encre: #f2d7e7;
  --neutre-doux: #2a2420; --neutre-encre: #bdb2a7;
  --aube-debut: #6e2a10; --aube-milieu: #8f3a17; --aube-fin: #a8471f; --aube-halo: rgba(207, 154, 132, 0.45);
  --graphe-4: #e3a43a; --graphe-6: #a89b8e;
  --voile: rgba(0, 0, 0, 0.56);
  --ombre-survol: 0 4px 16px #00000066;
  --ombre-flottante: 0 16px 48px #000000b3;
  --ombre-appareil: 0 24px 64px #000000b3;
}

/* Base minimale (à compléter dans la feuille du site) */
html { background: var(--fond); color: var(--encre); font-family: var(--police-ui); font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font-size: var(--texte-corps); line-height: 1.6; font-feature-settings: "tnum" 1; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; text-wrap: balance; }
:focus-visible { outline: none; box-shadow: var(--anneau-focus); border-radius: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}