/* ============================================================
   Materia OS — Design tokens (Material 3 dynamique)
   Toute la palette dérive d'une seule teinte : --hue.
   Changer --hue (Réglages rapides / Paramètres) re-teinte l'OS.
   ============================================================ */

:root {
  --hue: 256;
  --sat: 42%;

  /* --- Rôles de couleur (mode clair) --- */
  --primary:              hsl(var(--hue) var(--sat) 44%);
  --on-primary:           #ffffff;
  --primary-container:    hsl(var(--hue) 75% 91%);
  --on-primary-container: hsl(var(--hue) 55% 20%);

  --secondary:            hsl(var(--hue) 18% 42%);
  --secondary-container:  hsl(var(--hue) 32% 89%);
  --on-secondary-container: hsl(var(--hue) 24% 22%);

  --tertiary:             hsl(calc(var(--hue) + 60) 38% 44%);
  --tertiary-container:   hsl(calc(var(--hue) + 60) 55% 89%);
  --on-tertiary-container: hsl(calc(var(--hue) + 60) 45% 20%);

  --surface:                    hsl(var(--hue) 30% 97%);
  --surface-dim:                hsl(var(--hue) 22% 89%);
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      hsl(var(--hue) 26% 95%);
  --surface-container:          hsl(var(--hue) 22% 93%);
  --surface-container-high:     hsl(var(--hue) 20% 90%);
  --surface-container-highest:  hsl(var(--hue) 18% 87%);

  --on-surface:          hsl(var(--hue) 14% 12%);
  --on-surface-variant:  hsl(var(--hue) 10% 36%);
  --outline:             hsl(var(--hue) 8% 54%);
  --outline-variant:     hsl(var(--hue) 14% 81%);

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;

  --success: hsl(150 45% 34%);
  --success-container: hsl(150 55% 88%);

  --scrim: rgb(0 0 0 / .38);

  /* --- Élévation --- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .12), 0 1px 3px 1px rgb(0 0 0 / .07);
  --shadow-2: 0 1px 2px rgb(0 0 0 / .14), 0 2px 6px 2px rgb(0 0 0 / .09);
  --shadow-3: 0 4px 8px 3px rgb(0 0 0 / .11), 0 1px 3px rgb(0 0 0 / .14);
  --shadow-4: 0 6px 10px 4px rgb(0 0 0 / .12), 0 2px 3px rgb(0 0 0 / .16);
  --shadow-5: 0 8px 12px 6px rgb(0 0 0 / .13), 0 4px 4px rgb(0 0 0 / .18);

  /* --- Formes --- */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* --- Typo --- */
  --font: "Roboto Flex", system-ui, -apple-system, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;

  /* --- Mouvement (Material emphasized easing) --- */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0, 1);
  --dur-s: 150ms;
  --dur-m: 280ms;
  --dur-l: 450ms;

  /* --- Divers --- */
  --glass: blur(24px) saturate(1.4);
}

/* --- Mode sombre --- */
:root[data-mode="dark"] {
  --primary:              hsl(var(--hue) 75% 81%);
  --on-primary:           hsl(var(--hue) 55% 17%);
  --primary-container:    hsl(var(--hue) 38% 30%);
  --on-primary-container: hsl(var(--hue) 80% 92%);

  --secondary:            hsl(var(--hue) 20% 72%);
  --secondary-container:  hsl(var(--hue) 16% 27%);
  --on-secondary-container: hsl(var(--hue) 30% 88%);

  --tertiary:             hsl(calc(var(--hue) + 60) 45% 78%);
  --tertiary-container:   hsl(calc(var(--hue) + 60) 30% 28%);
  --on-tertiary-container: hsl(calc(var(--hue) + 60) 55% 90%);

  --surface:                    hsl(var(--hue) 16% 9%);
  --surface-dim:                hsl(var(--hue) 16% 7%);
  --surface-container-lowest:   hsl(var(--hue) 18% 5%);
  --surface-container-low:      hsl(var(--hue) 15% 12%);
  --surface-container:          hsl(var(--hue) 14% 14%);
  --surface-container-high:     hsl(var(--hue) 13% 18%);
  --surface-container-highest:  hsl(var(--hue) 12% 22%);

  --on-surface:          hsl(var(--hue) 20% 92%);
  --on-surface-variant:  hsl(var(--hue) 12% 72%);
  --outline:             hsl(var(--hue) 8% 55%);
  --outline-variant:     hsl(var(--hue) 10% 26%);

  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  --success: hsl(150 50% 72%);
  --success-container: hsl(150 30% 24%);

  --scrim: rgb(0 0 0 / .55);

  --shadow-1: 0 1px 2px rgb(0 0 0 / .35), 0 1px 3px 1px rgb(0 0 0 / .22);
  --shadow-2: 0 1px 2px rgb(0 0 0 / .38), 0 2px 6px 2px rgb(0 0 0 / .26);
  --shadow-3: 0 4px 8px 3px rgb(0 0 0 / .30), 0 1px 3px rgb(0 0 0 / .38);
  --shadow-4: 0 6px 10px 4px rgb(0 0 0 / .32), 0 2px 3px rgb(0 0 0 / .42);
  --shadow-5: 0 8px 12px 6px rgb(0 0 0 / .35), 0 4px 4px rgb(0 0 0 / .46);
}