/* =====================================================================
   VISION PME — Design Tokens
   Source de vérité unique. Identité : vert #00CE86 · Poppins / Inter.
   Thème clair (défaut) + sombre via [data-theme].
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* === BRAND === */
  --green: #00CE86;                 /* vert signature Vision PME */
  --green-bright: #0BE998;
  --green-deep: #00A86C;            /* CTA hover / texte sur clair */
  --green-text: #00754B;            /* vert lisible sur fond blanc (AA) */
  --green-ink: #03301F;             /* texte sur aplat vert */
  --night: #0C1713;                 /* presque-noir teinté vert */
  --night-2: #11201A;

  /* === ACCENTS SÉMANTIQUES === */
  --ok:      #00A86C;
  --ok-soft: rgba(0, 206, 134, 0.13);
  --info:      #4F7CFF;
  --info-soft: rgba(79, 124, 255, 0.12);
  --warn:      #E89B00;
  --warn-soft: rgba(232, 155, 0, 0.14);
  --danger:      #E5484D;
  --danger-soft: rgba(229, 72, 77, 0.12);
  --violet:      #8E6FF7;
  --violet-soft: rgba(142, 111, 247, 0.13);
  --cyan:        #00B8C4;
  --cyan-soft:   rgba(0, 184, 196, 0.12);

  /* === RADII === */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* === SPACING (base 4) === */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* === TYPE === */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-display: clamp(2.5rem, 1.5rem + 3.6vw, 4.4rem);
  --fs-h1: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  --fs-h3: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-2xs: 0.7rem;

  /* === MOTION === */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
  --dur-fast: 140ms;
  --dur: 230ms;
  --dur-slow: 430ms;

  /* === Z-INDEX === */
  --z-nav: 100; --z-drop: 300; --z-modal: 1000; --z-toast: 1100; --z-splash: 2000;
}

/* ====================  CLAIR (défaut)  ==================== */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #F7FAF8;
  --bg-grad: radial-gradient(1100px 600px at 85% -10%, rgba(0, 206, 134, 0.09), transparent 60%),
             radial-gradient(800px 540px at 0% 0%, rgba(0, 184, 196, 0.05), transparent 55%);
  --surface-1: #FFFFFF;
  --surface-2: #F2F6F4;
  --surface-3: #EAF1ED;
  --elevated: #FFFFFF;

  --border: rgba(12, 23, 19, 0.09);
  --border-strong: rgba(12, 23, 19, 0.17);
  --ring: var(--green-deep);

  --text: #101D17;
  --text-muted: #44544C;
  --text-subtle: #6C7B73;

  --on-brand: var(--green-ink);
  --field: #FFFFFF;
  --field-border: rgba(12, 23, 19, 0.14);

  --sh-sm: 0 1px 2px rgba(12, 23, 19, 0.06);
  --sh-md: 0 8px 26px -10px rgba(12, 23, 19, 0.16);
  --sh-lg: 0 28px 60px -20px rgba(12, 23, 19, 0.24);
  --glow-brand: 0 0 0 1px rgba(0, 206, 134, 0.28), 0 12px 32px -10px rgba(0, 206, 134, 0.45);

  --nav-glass: rgba(255, 255, 255, 0.78);
  --kanban-col: rgba(12, 23, 19, 0.033);
}

/* ====================  SOMBRE  ==================== */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C1411;
  --bg-grad: radial-gradient(1100px 640px at 80% -10%, rgba(0, 206, 134, 0.10), transparent 60%),
             radial-gradient(820px 560px at 4% 2%, rgba(0, 184, 196, 0.06), transparent 55%);
  --surface-1: #121C18;
  --surface-2: #18241F;
  --surface-3: #1E2C26;
  --elevated: #15201B;

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --ring: var(--green);

  --text: #F2F7F4;
  --text-muted: #A7B6AE;
  --text-subtle: #748279;

  --on-brand: var(--green-ink);
  --field: #15211C;
  --field-border: rgba(255, 255, 255, 0.11);

  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md: 0 8px 26px -10px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 28px 64px -20px rgba(0, 0, 0, 0.7);
  --glow-brand: 0 0 0 1px rgba(0, 206, 134, 0.3), 0 12px 36px -10px rgba(0, 206, 134, 0.35);

  --nav-glass: rgba(12, 20, 17, 0.72);
  --kanban-col: rgba(255, 255, 255, 0.035);

  --green-text: #2FE0A2;
  --ok: #2FE0A2;
  --warn: #F2B33D;
  --info: #7C9DFF;
  --danger: #F2636A;
}

/* ====================  BASE RESET  ==================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: var(--green); color: var(--green-ink); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}