/* ==========================================================================
   Design tokens — toute couleur, taille ou durée passe par ces variables.
   Thème : système par défaut, forcé via <html data-theme="light|dark">.
   Accent : Encre par défaut, variantes via <html data-accent="foret|corail">.
   ========================================================================== */
:root{
  --accent-h: 229; --accent-s: 78%; --accent-l: 58%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%));
  --accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .1);
  --on-accent: #fff;
  /* Dégradé de marque (Tatasko) : dérivé de l'accent choisi, teinte décalée vers le violet */
  --grad: linear-gradient(120deg, hsl(var(--accent-h) var(--accent-s) 58%), hsl(calc(var(--accent-h) + 38) 70% 62%));
  --grad-text: linear-gradient(100deg, hsl(var(--accent-h) 90% 62%), hsl(calc(var(--accent-h) + 40) 80% 66%) 60%, hsl(calc(var(--accent-h) + 85) 75% 70%));
  --glow: 0 8px 28px -6px hsl(var(--accent-h) 80% 55% / .45);
  --ring: 0 0 0 3px hsl(var(--accent-h) 90% 60% / .22);

  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-2: #EEF0F6;
  --surface-3: #E4E7F0;
  --border: #E2E5EE;
  --border-strong: #CDD2DF;
  --text: #14162B;
  --text-2: #4F5470;
  --text-3: #858AA3;

  --p-urgent: #E5484D;
  --p-high:   #F76B15;
  --p-medium: #D69E2E;
  --p-low:    #12A594;
  --p-none:   #A1A1AA;

  --st-todo:     #8A8A93;
  --st-progress: var(--accent);
  --st-waiting:  #8E4EC6;
  --st-done:     #30A46C;

  --danger: #DC3E42;
  --success: #2B9A66;
  --warning: #D69E2E;

  --font-title: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1.0625rem;
  --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 5rem;

  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(20 20 30 / .06);
  --shadow: 0 1px 2px rgb(20 20 30 / .05), 0 4px 14px rgb(20 20 30 / .06);
  --shadow-lg: 0 10px 40px rgb(20 20 30 / .14);

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur: 220ms;

  --tap: 44px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent-s: 100%; --accent-l: 72%;
    --on-accent: #0B0D18;
    --bg: #07080E; --surface: #0E1019; --surface-2: #131624; --surface-3: #1B1F31;
    --border: #1D2134; --border-strong: #2C3150;
    --text: #EDEEF5; --text-2: #A0A5BC; --text-3: #6B7088;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 6px 20px rgb(0 0 0 / .35);
    --shadow-lg: 0 24px 60px -12px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .04);
    --glow: 0 10px 34px -6px hsl(var(--accent-h) 90% 60% / .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --accent-s: 100%; --accent-l: 72%;
  --on-accent: #0B0D18;
  --bg: #07080E; --surface: #0E1019; --surface-2: #131624; --surface-3: #1B1F31;
  --border: #1D2134; --border-strong: #2C3150;
  --text: #EDEEF5; --text-2: #A0A5BC; --text-3: #6B7088;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 6px 20px rgb(0 0 0 / .35);
  --shadow-lg: 0 24px 60px -12px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .04);
  --glow: 0 10px 34px -6px hsl(var(--accent-h) 90% 60% / .55);
  color-scheme: dark;
}

/* Variantes d'accent (préférence utilisateur) */
:root[data-accent="foret"]{ --accent-h: 152; --accent-s: 48%; --accent-l: 36%; }
:root[data-accent="corail"]{ --accent-h: 14;  --accent-s: 78%; --accent-l: 52%; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-accent="foret"]{ --accent-l: 52%; }
  :root:not([data-theme="light"])[data-accent="corail"]{ --accent-l: 64%; }
}
:root[data-theme="dark"][data-accent="foret"]{ --accent-l: 52%; }
:root[data-theme="dark"][data-accent="corail"]{ --accent-l: 64%; }