/* Flow UI — les tokens.
 *
 * La grammaire commune de nos apps (ADEFPAT finance & administratif,
 * Mihaveille, Mihagenda, Mihamailing) : celle de Notion. Encre #37352F,
 * filet #E9E9E7, coquille #F7F7F5, rayon 4 px, base 14 px. Une app ne change
 * que son accent (ce qui agit) et sa police — le reste ne bouge pas.
 *
 * Format shadcn : des triplets HSL, qu'on lit avec hsl(var(--x)) et qu'on
 * voile avec hsl(var(--x) / 0.06). Ce fichier se colle tel quel dans le
 * `@layer base` d'une app Tailwind ; tailwind.preset.js fait le reste.
 *
 * Accent : bleu par défaut, `data-accent="orange"` sur <html> pour Miharu.
 * Thème : sombre suit le système, `data-theme="dark|light"` ou `.dark` force. */

:root {
  /* — Neutres — */
  --background: 0 0% 100%;          /* #FFFFFF */
  --foreground: 45 8% 20%;          /* #37352F l'encre */
  --card: 0 0% 100%;
  --card-foreground: 45 8% 20%;
  --popover: 0 0% 100%;
  --popover-foreground: 45 8% 20%;
  --secondary: 60 11% 96%;          /* #F7F7F5 */
  --secondary-foreground: 45 8% 20%;
  --muted: 60 11% 96%;
  --muted-foreground: 45 2% 46%;    /* #787774 le gris des métadonnées */
  --faint: 45 2% 60%;               /* #9B9A97 le gris des libellés */
  --border: 60 4% 91%;              /* #E9E9E7 le filet */
  --input: 60 4% 91%;
  --sidebar: 60 11% 96%;            /* #F7F7F5 la coquille */
  --hover: 45 8% 20%;               /* le voile des survols, à /0.06 ou /0.08 */

  /* — Accent : ce qui agit, ce qui est choisi. Bleu Notion par défaut. — */
  --primary: 210 77% 51%;           /* #2383E2 */
  --primary-foreground: 0 0% 100%;
  --accent: 198 55% 94%;            /* #E7F3F8 l'aplat d'un choix actif */
  --accent-foreground: 210 77% 41%;
  --ring: 210 77% 51%;

  /* — Sens — */
  --destructive: 0 79% 63%;         /* #EB5757 */
  --destructive-foreground: 0 0% 100%;
  /* Ambre : « cette ligne t'attend ». Jamais pour dire ce qu'une ligne est,
     seulement qu'il reste quelque chose à y faire. */
  --attente: 39 100% 27%;           /* #8A5A00 */
  --attente-trait: 43 83% 47%;      /* #D9A514 le point d'une alerte */

  /* — Pastels : une couleur par sens, jamais pour décorer — */
  --tag-gray: 45 6% 92%;      --tag-gray-fg: 40 6% 18%;
  --tag-blue: 201 45% 88%;    --tag-blue-fg: 205 49% 19%;
  --tag-green: 120 33% 89%;   --tag-green-fg: 147 33% 17%;
  --tag-yellow: 41 93% 89%;   --tag-yellow-fg: 28 41% 18%;
  --tag-red: 9 100% 93%;      --tag-red-fg: 2 63% 22%;
  --tag-purple: 278 34% 90%;  --tag-purple-fg: 276 40% 24%;
  /* La réponse « oui » d'une question : un vert tiré vers le bleu, pour ne
     pas jurer contre l'aplat d'une carte validée. */
  --oui: 155 38% 83%;         --oui-fg: 158 55% 13%;

  /* — Forme — */
  --radius: 0.25rem;                /* 4px, le rayon Notion */
  --font-sans: "Geist", "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --shadow-btn: rgba(15,15,15,.1) 0 0 0 1px, rgba(15,15,15,.1) 0 1px 2px;
  --shadow-pop: rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px;
  --shadow-carte: 0 6px 20px rgba(0,0,0,.07);
}

/* Miharu : l'orange à la place du bleu, Urbanist à la place de Geist. */
:root[data-accent="orange"] {
  --primary: 16 98% 52%;            /* #FD4C0E */
  --accent: 16 90% 94%;
  --accent-foreground: 16 85% 38%;
  --ring: 16 98% 52%;
  --font-sans: "Urbanist", "Helvetica", "Arial", system-ui, sans-serif;
}

/* ———————————————————————————— sombre ———————————————————————————— */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    color-scheme: dark;
    --background: 0 0% 10%;  --foreground: 0 0% 83%;
    --card: 0 0% 10%;        --card-foreground: 0 0% 83%;
    --popover: 0 0% 15%;     --popover-foreground: 0 0% 83%;
    --secondary: 0 0% 15%;   --secondary-foreground: 0 0% 83%;
    --muted: 0 0% 15%;       --muted-foreground: 0 0% 60%;
    --faint: 0 0% 45%;
    --border: 0 0% 18%;      --input: 0 0% 18%;
    --sidebar: 0 0% 13%;     --hover: 0 0% 100%;
    --primary: 203 53% 56%;  --accent: 205 30% 22%;  --accent-foreground: 203 53% 70%;  --ring: 203 53% 56%;
    --destructive: 0 60% 62%;
    --attente: 43 68% 47%;   --attente-trait: 43 68% 47%;
    --tag-gray: 0 0% 22%;    --tag-gray-fg: 0 0% 83%;
    --tag-blue: 203 43% 21%; --tag-blue-fg: 200 56% 83%;
    --tag-green: 150 26% 19%; --tag-green-fg: 136 32% 81%;
    --tag-yellow: 37 36% 21%; --tag-yellow-fg: 43 78% 81%;
    --tag-red: 6 33% 24%;    --tag-red-fg: 8 67% 85%;
    --tag-purple: 272 24% 23%; --tag-purple-fg: 278 44% 84%;
    --oui: 158 32% 21%;      --oui-fg: 149 38% 79%;
    --shadow-btn: rgba(255,255,255,.13) 0 0 0 1px, rgba(0,0,0,.3) 0 1px 2px;
    --shadow-pop: rgba(255,255,255,.1) 0 0 0 1px, rgba(0,0,0,.4) 0 3px 6px, rgba(0,0,0,.5) 0 9px 24px;
    --shadow-carte: 0 6px 20px rgba(0,0,0,.4);
  }
  :root:not([data-theme="light"]):not(.light)[data-accent="orange"] {
    --primary: 16 95% 58%;   --accent: 16 45% 22%;  --accent-foreground: 16 90% 70%;  --ring: 16 95% 58%;
  }
}

:root[data-theme="dark"], :root.dark {
  color-scheme: dark;
  --background: 0 0% 10%;  --foreground: 0 0% 83%;
  --card: 0 0% 10%;        --card-foreground: 0 0% 83%;
  --popover: 0 0% 15%;     --popover-foreground: 0 0% 83%;
  --secondary: 0 0% 15%;   --secondary-foreground: 0 0% 83%;
  --muted: 0 0% 15%;       --muted-foreground: 0 0% 60%;
  --faint: 0 0% 45%;
  --border: 0 0% 18%;      --input: 0 0% 18%;
  --sidebar: 0 0% 13%;     --hover: 0 0% 100%;
  --primary: 203 53% 56%;  --accent: 205 30% 22%;  --accent-foreground: 203 53% 70%;  --ring: 203 53% 56%;
  --destructive: 0 60% 62%;
  --attente: 43 68% 47%;   --attente-trait: 43 68% 47%;
  --tag-gray: 0 0% 22%;    --tag-gray-fg: 0 0% 83%;
  --tag-blue: 203 43% 21%; --tag-blue-fg: 200 56% 83%;
  --tag-green: 150 26% 19%; --tag-green-fg: 136 32% 81%;
  --tag-yellow: 37 36% 21%; --tag-yellow-fg: 43 78% 81%;
  --tag-red: 6 33% 24%;    --tag-red-fg: 8 67% 85%;
  --tag-purple: 272 24% 23%; --tag-purple-fg: 278 44% 84%;
  --oui: 158 32% 21%;      --oui-fg: 149 38% 79%;
  --shadow-btn: rgba(255,255,255,.13) 0 0 0 1px, rgba(0,0,0,.3) 0 1px 2px;
  --shadow-pop: rgba(255,255,255,.1) 0 0 0 1px, rgba(0,0,0,.4) 0 3px 6px, rgba(0,0,0,.5) 0 9px 24px;
  --shadow-carte: 0 6px 20px rgba(0,0,0,.4);
}
:root[data-theme="dark"][data-accent="orange"], :root.dark[data-accent="orange"] {
  --primary: 16 95% 58%;   --accent: 16 45% 22%;  --accent-foreground: 16 90% 70%;  --ring: 16 95% 58%;
}