/* Tokens.
   Mode « Operate + Read » : l'app s'ouvre tous les jours, souvent en dix
   secondes. La couleur code l'action et l'état, elle ne porte pas d'ambiance.
   La rareté fait la force de l'accent.

   Palette en OKLCH : la clarté et le chroma s'y ajustent de façon prévisible,
   ce qui permet de dériver une rampe cohérente au lieu d'empiler des hex.
   Les neutres sont légèrement teintés du bleu de l'app — assez pour faire
   ensemble, pas assez pour se voir. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light dark;

  /* ─── Surfaces ─── */
  --bg:          oklch(98.2% 0.003 264);
  --surface:     oklch(100% 0 0);
  --sunken:      oklch(95.6% 0.005 264);
  --hover:       oklch(96.4% 0.005 264);

  --border:      oklch(91.5% 0.007 264);
  --border-firm: oklch(85% 0.010 264);

  /* Le contour d'un contrôle n'est pas un séparateur : il doit atteindre 3:1
     comme n'importe quel élément d'interface. À 85% de clarté, une case non
     cochée tombait à 1,6:1, donc presque invisible. */
  --control-line: oklch(63% 0.014 264);

  /* ─── Texte ─── */
  /* Trois rôles, tous au-dessus de 4.5:1 sur --bg. L'ancien --text-3 tombait
     à 2,5:1 : les indications et les compteurs étaient illisibles au soleil. */
  --text:    oklch(24% 0.014 264);
  --text-2:  oklch(46% 0.014 264);
  --text-3:  oklch(55% 0.013 264);

  /* ─── Accents ─── */
  /* Le bleu ne sert qu'à une chose : l'action et la position courante.
     Dépensé en décoration, il ne signalerait plus rien. */
  --accent:      oklch(54% 0.208 264);
  --accent-hi:   oklch(48% 0.208 264);
  --accent-soft: oklch(96% 0.024 264);
  --accent-line: oklch(86% 0.070 264);
  --on-accent:   oklch(100% 0 0);

  --done:        oklch(58% 0.126 162);
  --done-soft:   oklch(96.5% 0.026 162);
  --done-line:   oklch(88% 0.070 162);

  --alert:       oklch(55% 0.205 27);
  --alert-soft:  oklch(96% 0.026 27);
  --miss:        oklch(78% 0.090 27);   /* jour raté, sur le bandeau de séries */

  /* ─── Profondeur ─── */
  /* Chaque ombre porte un décalage et un flou doux : un halo coloré sans
     décalage serait de la décoration, pas de la profondeur. Teintées du
     neutre de l'app plutôt qu'en noir pur. */
  --lift-1: 0 1px 2px oklch(24% 0.014 264 / 0.05);
  --lift-2: 0 1px 3px oklch(24% 0.014 264 / 0.07), 0 2px 8px oklch(24% 0.014 264 / 0.04);
  --lift-3: 0 4px 12px oklch(24% 0.014 264 / 0.10), 0 12px 32px oklch(24% 0.014 264 / 0.07);

  /* ─── Espacement ─── */
  /* Base 4 : les pas intermédiaires qu'une échelle en 8 seulement ne donne pas. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;  --s12: 48px;

  /* ─── Typographie ─── */
  /* Cinq rôles, distinguables sans lire le texte. 16px de plancher pour le
     corps : en dessous, iOS zoome tout seul au focus d'un champ. */
  --t-title:   1.0625rem;   /* 17px */
  --t-body:    1rem;        /* 16px */
  --t-label:   0.875rem;    /* 14px */
  --t-meta:    0.8125rem;   /* 13px */
  --t-micro:   0.75rem;     /* 12px */

  --lh-tight: 1.25;
  --lh-body:  1.55;

  --r1: 6px;  --r2: 10px;  --r3: 14px;  --r-full: 999px;

  --topbar-h: 56px;
  --tabbar-h: 56px;
  --tap: 44px;

  --font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", system-ui, sans-serif;

  /* ─── Mouvement ─── */
  /* Décélération naturelle, jamais de rebond par réflexe. La sortie est plus
     rapide que l'entrée : une disparition lente se lit comme de la latence. */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;   /* retour immédiat */
  --dur:       200ms;   /* changement d'état courant */
  --dur-slow:  320ms;   /* superposition, transition de vue */

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Thème sombre composé, pas inversé.
   Choisi depuis la scène d'usage : le dernier passage de la journée se fait au
   lit, écran à trente centimètres. Les surfaces s'éclaircissent avec
   l'élévation, le texte perd du contraste pur, et l'accent gagne en clarté
   pour rester lisible sans éblouir. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          oklch(17% 0.012 264);
    --surface:     oklch(21% 0.014 264);
    --sunken:      oklch(19% 0.013 264);
    --hover:       oklch(25% 0.015 264);

    --border:       oklch(28% 0.016 264);
    --border-firm:  oklch(36% 0.018 264);
    --control-line: oklch(56% 0.018 264);

    --text:    oklch(95% 0.006 264);
    --text-2:  oklch(76% 0.012 264);
    --text-3:  oklch(66% 0.012 264);

    --accent:      oklch(70% 0.160 264);
    --accent-hi:   oklch(77% 0.150 264);
    --accent-soft: oklch(27% 0.055 264);
    --accent-line: oklch(38% 0.090 264);
    --on-accent:   oklch(17% 0.012 264);

    --done:        oklch(70% 0.140 162);
    --done-soft:   oklch(26% 0.045 162);
    --done-line:   oklch(36% 0.070 162);

    --alert:       oklch(70% 0.170 27);
    --alert-soft:  oklch(27% 0.055 27);
    --miss:        oklch(48% 0.100 27);

    /* Dans le noir, l'ombre ne se voit plus : l'élévation passe par la
       clarté de la surface, et l'ombre ne fait qu'asseoir les superpositions. */
    --lift-1: none;
    --lift-2: 0 1px 3px oklch(0% 0 0 / 0.35);
    --lift-3: 0 8px 28px oklch(0% 0 0 / 0.55);
  }
}