/* ============================================================================
   Isa-kafo — tokens.css
   Traduction en variables CSS de docs/DESIGN.md (« Le rituel de l'assiette »).
   Une seule source : aucune couleur, taille, durée ou rayon en dur ailleurs.
   Règles vérifiées par tests/tokens.test.js : accolades équilibrées, aucun
   `uppercase`, aucun `letter-spacing` ≥ 0.05em, contrastes AA recalculés.
   ============================================================================ */

/* ---------- 1. Police : Bricolage Grotesque variable (OFL), locale ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("./../assets/fonts/BricolageGrotesque-variable.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: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("./../assets/fonts/BricolageGrotesque-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Replis sans saut de mise en page pendant le `swap`.
   size-adjust mesuré dans Chromium sur une ligne de journal type à 16 px / 450
   (« Vary fotsy, lovia moyenne 250 g · 1 200 Ar Ravitoto sy henakisoa Sakafo atoandro ») :
   Bricolage 615,8 px · Roboto 530,9 px → 116 % · Segoe UI 572,9 px → 107,5 % · Arial 582,0 px → 105,8 %.
   Une face dont la police locale manque est ignorée : la pile passe à la suivante. */
@font-face {
  font-family: "Bricolage Repli Roboto";
  src: local("Roboto");
  size-adjust: 116%;
}

@font-face {
  font-family: "Bricolage Repli Segoe";
  src: local("Segoe UI");
  size-adjust: 107.5%;
}

@font-face {
  font-family: "Bricolage Repli Arial";
  src: local("Arial");
  size-adjust: 105.8%;
}

/* ---------- 2. Tokens communs aux deux modes ---------- */

:root {
  color-scheme: light dark;

  /* Typographie — une famille, trois rôles (affichage / interface / chiffres) */
  --police: "Bricolage Grotesque", "Bricolage Repli Roboto", "Bricolage Repli Segoe",
    "Bricolage Repli Arial", system-ui, sans-serif;
  --chiffres: tabular-nums lining-nums; /* font-variant-numeric, obligatoire pour NumberFlow */
  --wdth: 100; /* jamais condensé */

  /* Échelle (base 16 px) — taille / poids / opsz / interligne / espacement */
  --t-hero: 3.5rem;        --p-hero: 600;        --o-hero: 96; --i-hero: 1;     --s-hero: -0.02em;
  --t-titre: 1.75rem;      --p-titre: 650;       --o-titre: 48; --i-titre: 1.15; --s-titre: -0.015em;
  --t-sous-titre: 1.375rem; --p-sous-titre: 600; --o-sous-titre: 24; --i-sous-titre: 1.2; --s-sous-titre: -0.01em;
  --t-corps-fort: 1.0625rem; --p-corps-fort: 550; --o-corps-fort: 17; --i-corps-fort: 1.35; --s-corps-fort: 0;
  --t-corps: 1rem;         --p-corps: 450;       --o-corps: 16; --i-corps: 1.45; --s-corps: 0;
  --t-secondaire: 0.875rem; --p-secondaire: 450; --o-secondaire: 14; --i-secondaire: 1.4; --s-secondaire: 0;
  --t-legende: 0.75rem;    --p-legende: 500;     --o-legende: 12; --i-legende: 1.3; --s-legende: 0.01em;
  --t-chiffre-l: 1.5rem;   --p-chiffre-l: 600;   --o-chiffre-l: 24; --i-chiffre-l: 1.1; --s-chiffre-l: -0.01em;
  --t-chiffre: 1rem;       --p-chiffre: 500;     --o-chiffre: 16; --i-chiffre: 1.45; --s-chiffre: 0;
  --t-chiffre-s: 0.75rem;  --p-chiffre-s: 550;   --o-chiffre-s: 12; --i-chiffre-s: 1.3; --s-chiffre-s: 0;

  /* Espacement (grille 4 pt) */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-16: 64px;
  --marge-ecran: var(--e-5); /* 32 px à partir de 768 px, voir bas de fichier */

  /* Hauteurs de référence */
  --h-cible: 44px;   /* cible tactile minimale */
  --h-champ: 48px;   /* champ de recherche */
  --h-bouton: 52px;  /* bouton principal, toast */
  --h-ligne: 56px;   /* ligne de journal, résultat de recherche */
  --h-nav: 56px;     /* + env(safe-area-inset-bottom) */
  --h-jours: 64px;   /* ligne de jours */
  --d-plus: 56px;    /* disque du bouton « + » */
  --d-lovia: 280px;  /* rendu mobile ; 320 px sur bureau */

  /* Largeurs */
  --l-colonne: 560px;    /* colonne unique, 640–1023 px */
  --l-gauche: 440px;     /* bureau : Lovia + repas */
  --l-droite: 640px;     /* bureau : détail, max */
  --l-gouttiere: 48px;
  --l-max: 1200px;
  --l-nav-bureau: 72px;
  --l-sheet: 480px;      /* sheet sur bureau */
  --l-toast: calc(100% - 40px);

  /* Rayons */
  --r-s: 8px;      /* champs, chips — jamais le mot « tombana », qui n'a pas de boîte */
  --r-m: 14px;     /* boutons, ligne en déplacement */
  --r-l: 22px;     /* bottom sheet, toast */
  --r-rond: 999px; /* « + », points, gobelets */

  /* Durées */
  --d-1: 90ms;   /* pression */
  --d-2: 160ms;  /* changement d'état, remplissage d'un gobelet */
  --d-3: 220ms;  /* sortie, écran suivant */
  --d-4: 260ms;  /* toast, respiration du rebord */
  --d-5: 320ms;  /* retour de glissement, retour de Maky */
  --d-6: 420ms;  /* ouverture de sheet, changement de jour */
  --d-7: 500ms;  /* chiffres qui roulent */
  --d-8: 600ms;  /* anneaux de la Lovia, pluie de riz */

  /* Easings — courbes ressort calculées (oscillateur amorti, 25 points) */
  --sortie: cubic-bezier(0.2, 0, 0, 1);   /* apparition, décélération */
  --entree: cubic-bezier(0.4, 0, 1, 1);   /* disparition, accélération */
  /* ζ 0,90 · ω 18 · fenêtre 500 ms · dépassement 0,2 % · posé (±0,2 %) à 64 % */
  --ressort-doux: linear(0, 0.056 4%, 0.18 8%, 0.326 13%, 0.469 17%, 0.595 21%, 0.7 25%,
    0.784 29%, 0.849 33%, 0.897 38%, 0.932 42%, 0.956 46%, 0.973 50%, 0.985 54%, 0.992 58%,
    0.997 63%, 0.999 67%, 1.001 71%, 1.001 75%, 1.002 79%, 1.001 83%, 1.001 88%, 1.001 92%,
    1.001 96%, 1);
  /* ζ 0,62 · ω 16 · fenêtre 700 ms · dépassement 8,4 % · posé à 88 % */
  --ressort-vif: linear(0, 0.089 4%, 0.287 8%, 0.514 13%, 0.72 17%, 0.881 21%, 0.99 25%,
    1.053 29%, 1.08 33%, 1.082 38%, 1.07 42%, 1.052 46%, 1.033 50%, 1.017 54%, 1.006 58%,
    0.998 63%, 0.994 67%, 0.993 71%, 0.993 75%, 0.995 79%, 0.996 83%, 0.998 88%, 0.999 92%,
    1 96%, 1);
  /* ζ 1,00 · ω 14 · fenêtre 660 ms · critique, aucun rebond · posé à 92 % */
  --ressort-sheet: linear(0, 0.058 4%, 0.18 8%, 0.321 13%, 0.455 17%, 0.573 21%, 0.671 25%,
    0.75 29%, 0.812 33%, 0.86 38%, 0.897 42%, 0.924 46%, 0.945 50%, 0.96 54%, 0.971 58%,
    0.979 63%, 0.985 67%, 0.989 71%, 0.992 75%, 0.994 79%, 0.996 83%, 0.997 88%, 0.998 92%,
    0.999 96%, 1);

  /* Plans (z-index) */
  --z-contenu: 0;
  --z-ligne-soulevee: 5;  /* ligne de journal en déplacement */
  --z-nav: 10;
  --z-bandeau: 15;        /* hors ligne, nouvelle version */
  --z-voile: 20;
  --z-sheet: 30;
  --z-toast: 40;
  --z-intro: 100;         /* écran de démarrage Vakana Studio */
  /* Nacre de l'intro Vakana Studio : couleur du STUDIO, pas de l'app — elle ne change pas avec le thème. */
  --intro-nacre: #F5F1E8;
}

/* Repli si `linear()` est absent (WebView Android < Chrome 113) : même durée, courbe douce. */
@supports not (animation-timing-function: linear(0, 1)) {
  :root {
    --ressort-doux: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ressort-vif: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ressort-sheet: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

/* ---------- 3. Couleurs — mode clair (défaut) ----------
   Contrastes WCAG 2.1 (fond · surface · surface-elevee), recalculés par tests/tokens.test.js :
   texte      15,53 · 16,68 · 17,56   AA
   texte-2     6,15 ·  6,60 ·  6,95   AA
   accent      5,22 ·  5,60 ·  5,90   AA (texte)
   alerte      7,81 ·  8,39 ·  8,84   AA
   succes      5,86 ·  6,29 ·  6,63   AA
   proteines   7,45 ·  8,00 ·  8,42   AA
   glucides    4,74 ·  5,09 ·  5,36   AA (A avait 3,64 : assombri)
   lipides     5,32 ·  5,72 ·  6,02   AA (A avait 4,21 : assombri)
   sur-accent sur accent 5,90 · sur-alerte sur alerte 8,84 · sur-succes sur succes 6,63
   fond sur texte (« Esorina » en Vary sur Kafe) 15,53
   bordure sur fond 1,29 — décoratif seulement, jamais porteur d'information
   voisins : proteines/glucides 1,57 · proteines/lipides 1,40 · glucides/lipides 1,12 ·
             accent/alerte 1,50 · succes/lipides 1,10 → la couleur n'est jamais le seul indice. */

:root {
  --fond: #F2F1EC;            /* Vary, nappe */
  --surface: #FAF9F6;         /* Vary, assiette */
  --surface-elevee: #FFFFFF;  /* Lovia */
  --lovia-disque: #FFFFFF;    /* disque central de la Lovia : toujours plus clair que la piste */
  --texte: #1E1814;           /* Kafe */
  --texte-2: #615850;         /* Ranovola */
  --bordure: #D9D5CC;         /* Tsihy */
  --accent: #BF2A17;          /* Sakay — action seulement */
  --sur-accent: #FFFFFF;
  --alerte: #921A0E;          /* Sakay maina — dépassement, objectif bas, erreur */
  --sur-alerte: #FFFFFF;
  --succes: #2B6845;          /* Ravitoto */
  --sur-succes: #FFFFFF;
  --proteines: #7D3A1C;       /* Omby */
  --glucides: #9E5A07;        /* Vomanga */
  --lipides: #4F6C17;         /* Zavoka */
  --riz: rgb(30 24 20 / 0.06);      /* niveau de riz dans le disque */
  --voile: rgb(30 24 20 / 0.32);    /* arrière-plan d'une sheet */
  --piste-macro: rgb(217 213 204 / 0.6); /* --bordure à 60 % (les arcs macros n'ont plus de piste) */
  --nappe-creuse: rgb(30 24 20 / 0.07);  /* creux de l'assiette : le tour se devine, il ne se compte pas */

  /* Élévation par la lumière */
  --ombre-2: 0 1px 0 var(--bordure), 0 12px 32px -16px rgb(30 24 20 / 0.28); /* sheet, toast, ligne soulevée */
  --ombre-3: 0 6px 16px -8px rgb(191 42 23 / 0.5);                            /* bouton « + » */
  --bord-eleve: none;                                                          /* sombre : bordure 1 px à la place de l'ombre */
}

/* ---------- 4. Couleurs — mode sombre ----------
   Contrastes (fond · surface · surface-elevee) :
   texte      15,97 · 14,80 · 13,16   AA
   texte-2     7,17 ·  6,64 ·  5,90   AA
   accent      5,55 ·  5,14 ·  4,57   AA (texte)
   alerte      7,21 ·  6,68 ·  5,94   AA
   succes      8,94 ·  8,28 ·  7,37   AA
   proteines   6,55 ·  6,07 ·  5,39   AA
   glucides    8,50 ·  7,87 ·  7,00   AA
   lipides     9,54 ·  8,83 ·  7,86   AA
   sur-accent sur accent 5,55 · sur-alerte sur alerte 7,21 · sur-succes sur succes 8,94
   fond sur texte (« Esorina ») 15,97 · bordure sur fond 1,52 (décoratif)
   voisins : proteines/glucides 1,30 · proteines/lipides 1,46 · glucides/lipides 1,12 · accent/alerte 1,30 */

[data-theme="dark"] {
  --fond: #151210;            /* Kafe mainty — jamais noir pur */
  --surface: #1E1A17;         /* Vilany */
  --surface-elevee: #29241F;  /* Vilany, bord */
  --lovia-disque: #3F3831;    /* plus clair que --bordure (#3A342E) : l'assiette se soulève, elle ne s'enfonce pas */
  --texte: #F1EDE5;           /* Vary */
  --texte-2: #A99F93;         /* Ranovola */
  --bordure: #3A342E;         /* Tsihy */
  --accent: #EE5C43;          /* Sakay */
  --sur-accent: #151210;
  --alerte: #F3806C;          /* Sakay maina */
  --sur-alerte: #151210;
  --succes: #74C494;          /* Ravitoto */
  --sur-succes: #151210;
  --proteines: #D4865E;       /* Omby */
  --glucides: #E9A03F;        /* Vomanga */
  --lipides: #A6C554;         /* Zavoka */
  --riz: rgb(241 237 229 / 0.06);
  --voile: rgb(21 18 16 / 0.5);         /* Kafe mainty à 50 % — jamais de noir pur, même en voile */
  --piste-macro: rgb(58 52 46 / 0.6);
  --nappe-creuse: rgb(241 237 229 / 0.09);

  --ombre-2: none;                      /* invisible sur brun-noir */
  --ombre-3: none;
  --bord-eleve: 1px solid var(--bordure);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #151210;
    --surface: #1E1A17;
    --surface-elevee: #29241F;
    --lovia-disque: #3F3831;
    --texte: #F1EDE5;
    --texte-2: #A99F93;
    --bordure: #3A342E;
    --accent: #EE5C43;
    --sur-accent: #151210;
    --alerte: #F3806C;
    --sur-alerte: #151210;
    --succes: #74C494;
    --sur-succes: #151210;
    --proteines: #D4865E;
    --glucides: #E9A03F;
    --lipides: #A6C554;
    --riz: rgb(241 237 229 / 0.06);
    --voile: rgb(21 18 16 / 0.5);
    --piste-macro: rgb(58 52 46 / 0.6);
    --nappe-creuse: rgb(241 237 229 / 0.09);

    --ombre-2: none;
    --ombre-3: none;
    --bord-eleve: 1px solid var(--bordure);
  }
}

/* ---------- 5. Points de rupture ---------- */

@media (min-width: 768px) {
  :root {
    --marge-ecran: var(--e-8); /* 32 px */
  }
}

@media (min-width: 1024px) {
  :root {
    --d-lovia: 320px;
  }
}