/* Calembitude — jetons de design. Source : docs/DESIGN.md. Contraste vérifié par tests/tokens.test.js. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* — Brume (clair, Maraina) — */
  --fond: #f1f3f6;
  --papier: #ffffff;
  --papier-2: #e6eaf0;
  --encre: #1a2130;
  --encre-2: #525c74;
  --encre-3: #606980;
  --trait: #d5dae3;
  --trait-fort: #7f889c;

  --soleil: #f2a93b;
  --soleil-arc: #c77b0e;
  --soleil-texte: #9a5b00;
  --soleil-doux: #fff3dc;
  --sur-soleil: #1a2130;

  --jacaranda: #6a4dc2;
  --jacaranda-doux: #ede8fb;
  --sur-jacaranda: #ffffff;

  --riziere: #2e7d4f;
  --riziere-doux: #ecf7f0;
  --sur-riziere: #ffffff;

  --laterite: #b7442b;
  --laterite-doux: #fbe8e3;
  --sur-laterite: #ffffff;

  /* dégradé de l'arc : la seule rampe de couleur de l'app, elle dit l'heure */
  --aube: #f3b6a0;
  --midi: #ffd166;
  --crepuscule: #e8763a;

  --focus: var(--jacaranda);
  --voile: rgba(26, 33, 48, 0.42);
  --eleve: 0 -8px 32px rgba(26, 33, 48, 0.18);

  /* typographie */
  --police: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-30: 1.875rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;

  /* espacements (grille de 4) et rayons */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 20px;
  --tap: 44px;

  /* mouvement */
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-micro: 120ms;
  --d-feuille: 220ms;
  --d-rebond: 320ms;
  --d-rature: 260ms;
  --d-ecran: 200ms;

  --barre-nav: 64px;
  --sur-securite-bas: env(safe-area-inset-bottom, 0px);
  --sur-securite-haut: env(safe-area-inset-top, 0px);
}

/* — Nuit sur Tana (sombre, Torimaso) — */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
    --fond: #10151f;
    --papier: #171e2b;
    --papier-2: #202939;
    --encre: #edf0f5;
    --encre-2: #a9b2c5;
    --encre-3: #8a93a8;
    --trait: #2a3446;
    --trait-fort: #626e88;

    --soleil: #f2b04b;
    --soleil-arc: #f2b04b;
    --soleil-texte: #f6c46b;
    --soleil-doux: #2c2617;
    --sur-soleil: #1a2130;

    --jacaranda: #ae98f5;
    --jacaranda-doux: #262238;
    --sur-jacaranda: #10151f;

    --riziere: #5ec285;
    --riziere-doux: #17291f;
    --sur-riziere: #10151f;

    --laterite: #ee8a6c;
    --laterite-doux: #33201b;
    --sur-laterite: #10151f;

    --voile: rgba(0, 0, 0, 0.55);
    --eleve: 0 -8px 32px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme='sombre'] {
  --fond: #10151f;
  --papier: #171e2b;
  --papier-2: #202939;
  --encre: #edf0f5;
  --encre-2: #a9b2c5;
  --encre-3: #8a93a8;
  --trait: #2a3446;
  --trait-fort: #626e88;

  --soleil: #f2b04b;
  --soleil-arc: #f2b04b;
  --soleil-texte: #f6c46b;
  --soleil-doux: #2c2617;
  --sur-soleil: #1a2130;

  --jacaranda: #ae98f5;
  --jacaranda-doux: #262238;
  --sur-jacaranda: #10151f;

  --riziere: #5ec285;
  --riziere-doux: #17291f;
  --sur-riziere: #10151f;

  --laterite: #ee8a6c;
  --laterite-doux: #33201b;
  --sur-laterite: #10151f;

  --voile: rgba(0, 0, 0, 0.55);
  --eleve: 0 -8px 32px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 0ms;
    --d-feuille: 0ms;
    --d-rebond: 0ms;
    --d-rature: 0ms;
    --d-ecran: 0ms;
  }
}