/* Polices AUTO-HÉBERGÉES (Inter + Fraunces, sous-jeu latin = couvre FR/EN).
   Évite tout appel à Google Fonts (fuite d'IP des familles vers les US = point
   Loi 25), gagne en vitesse et fonctionne hors ligne dans l'app native.
   Fichiers variables : un seul woff2 par famille couvre tous les poids. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   PROJECT ATLAS — DESIGN TOKENS
   Source : brief « ADN visuel » + palette + maquettes
   Inspirations : Apple Health · Calm · Headspace · Finch · Notion
   Règle : doux, premium, chaleureux, rassurant. Jamais criard.
   ============================================================ */

:root {
  /* ---------- COULEURS DE MARQUE ---------- */
  /* Palette de marque Germaine */
  --cream:        #F9F6F1; /* fond dominant ~60% (nudge plus pâle/clean, juil. 2026) */
  --cream-deep:   #EFEAE0; /* surfaces légèrement creusées */
  --sage:         #B7C8B1; /* secondaire ~20% */
  --sage-soft:    #D9E1D4; /* sauge très claire (surfaces) */
  --lavender:     #DCD5F2; /* lavande douce (surfaces émotion) */
  --lavender-soft:#ECE8F8;
  --night:        #2B1E3F; /* aubergine profond = texte + titres + important */
  --night-soft:   #5A4A6E; /* texte secondaire */
  --pink:         #FAD7E1; /* accent doux */
  --yellow:       #FFE7B1; /* accent doux chaleureux */
  --peach:        #FAD7E1; /* alias → rose doux */
  --peach-deep:   #F4BBCB;

  /* Surfaces */
  --surface:      #FFFFFF;
  --surface-warm: var(--cream);
  --surface-sunk: var(--cream-deep);

  /* Texte */
  --ink:          var(--night);
  --ink-soft:     var(--night-soft);
  --ink-faint:    #8A7E96;
  --on-night:     #F7F4EE;

  /* États — volontairement DOUX. Le rouge est réservé à l'urgence réelle. */
  --ok:           #8FA98A;  /* sauge profonde = bien / sous contrôle */
  --ok-bg:        #E7EEE2;
  --attention:    #E0A878;  /* pêche ambrée = à prévoir (jamais alarmant) */
  --attention-bg: #FBEADD;
  --urgent:       #C77B6B;  /* terracotta doux = urgence rare, jamais rouge vif */
  --urgent-bg:    #F6E2DC;
  --ai:           #8A57A6;  /* prune de marque = accent (voix de Germaine garde son halo lavande dans les orbes) */
  --ai-bg:        var(--lavender-soft);

  /* Lignes / bordures */
  --line:         #E7E0D4;
  --line-soft:    #F0EBE1;

  /* ---------- TYPOGRAPHIE ---------- */
  /* Display chaleureux (serif) + corps lisible (sans) — cf. maquettes */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --fs-hero:   clamp(28px, 6vw, 38px);
  --fs-h1:     clamp(24px, 5vw, 30px);
  --fs-h2:     20px;
  --fs-h3:     17px;
  --fs-body:   16px;
  --fs-sm:     14px;
  --fs-xs:     12.5px;

  --lh-tight:  1.18;
  --lh-snug:   1.35;
  --lh-body:   1.55;

  --fw-light:  300;
  --fw-reg:    400;
  --fw-med:    500;
  --fw-semi:   600;

  /* ---------- ESPACEMENT (échelle de 4) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px;

  /* ---------- RAYONS (très arrondis, doux) ---------- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---------- OMBRES (douces, jamais dures) ---------- */
  --shadow-sm:  0 1px 2px rgba(32,53,74,.04), 0 1px 3px rgba(32,53,74,.05);
  --shadow-md:  0 4px 16px rgba(32,53,74,.06), 0 1px 4px rgba(32,53,74,.04);
  --shadow-lg:  0 12px 40px rgba(32,53,74,.10), 0 4px 12px rgba(32,53,74,.05);
  --shadow-up:  0 -6px 24px rgba(32,53,74,.07);

  /* ---------- MOUVEMENT (lent, « respiration ») ---------- */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --t-fast:     160ms;
  --t-base:     260ms;
  --t-slow:     420ms;

  /* ---------- LAYOUT ---------- */
  --app-max:    480px;   /* mobile-first, centré sur bureau */
  --nav-h:      72px;
  --apphead-h:  70px;    /* en-tête fixe (logo) sur tous les onglets */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}