/* =====================================================================
   Manager Radio — Design tokens
   Palette neutre + accent, échelles d'espacement/rayon/ombre/typo.
   Thème clair par défaut, thème sombre via [data-theme="dark"].
   ===================================================================== */

:root {
  /* --- Typographie --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Menlo", monospace;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.25rem;   /* 36 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-base: 1.55;

  /* --- Espacement (base 4) --- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* --- Rayons --- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* --- Transitions --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 160ms;
  --dur-slow: 280ms;

  /* --- Largeurs de layout --- */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --content-max: 1180px;
}

/* =========================== THÈME CLAIR =========================== */
:root,
:root[data-theme="light"] {
  --bg: #f6f6f9;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(109, 94, 252, 0.06), transparent 60%);
  --surface: #ffffff;
  --surface-2: #f2f2f6;
  --surface-3: #ebebf1;
  --surface-hover: #f7f7fb;
  --border: #e7e7ee;
  --border-strong: #d7d7e1;

  --text: #16161d;
  --text-muted: #5f5f6d;
  --text-faint: #70707e;

  --accent: #6d5efc;
  --accent-600: #5b4be8;
  --accent-700: #4a3bd0;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(109, 94, 252, 0.1);
  --accent-ring: rgba(109, 94, 252, 0.35);

  --success: #12a150;
  --success-soft: rgba(18, 161, 80, 0.12);
  --danger: #cf2e37;
  --danger-soft: rgba(207, 46, 55, 0.12);
  --warn: #d98407;
  --warn-soft: rgba(217, 132, 7, 0.14);
  --on-air: #e5484d;

  --shadow-sm: 0 1px 2px rgba(16, 16, 30, 0.06), 0 1px 3px rgba(16, 16, 30, 0.05);
  --shadow: 0 4px 16px rgba(16, 16, 30, 0.08);
  --shadow-lg: 0 18px 48px rgba(16, 16, 30, 0.14);
  --shadow-accent: 0 8px 24px rgba(109, 94, 252, 0.28);

  /* --- Data-viz (validé, cf. skill dataviz) — mode clair --- */
  --chart-1: #6d5efc;              /* série unique (marque) */
  --chart-grid: #ececf2;           /* grille hairline, un cran hors surface */
  --chart-axis: #d7d7e1;           /* ligne d'axe / baseline */
  --chart-ink: #16161d;            /* encre primaire */
  --chart-muted: #70707e;          /* labels d'axe */
  --cat-1: #2a78d6; --cat-2: #1baf7a; --cat-3: #eda100; --cat-4: #008300;
  --cat-5: #4a3aa7; --cat-6: #e34948; --cat-7: #e87ba4; --cat-8: #eb6834;
}

/* =========================== THÈME SOMBRE =========================== */
:root[data-theme="dark"] {
  --bg: #0c0c11;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(124, 111, 253, 0.12), transparent 60%);
  --surface: #15151d;
  --surface-2: #1c1c26;
  --surface-3: #24242f;
  --surface-hover: #1f1f2a;
  --border: #262631;
  --border-strong: #33333f;

  --text: #f1f1f6;
  --text-muted: #9a9aa9;
  --text-faint: #6d6d7c;

  --accent: #7c6ffd;
  --accent-600: #8b7fff;
  --accent-700: #6d5efc;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(124, 111, 253, 0.16);
  --accent-ring: rgba(124, 111, 253, 0.45);

  --success: #3dd68c;
  --success-soft: rgba(61, 214, 140, 0.14);
  --danger: #ff6369;
  --danger-soft: rgba(255, 99, 105, 0.16);
  --warn: #f5a623;
  --warn-soft: rgba(245, 166, 35, 0.16);
  --on-air: #ff5a5f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 8px 28px rgba(124, 111, 253, 0.4);

  /* --- Data-viz — mode sombre (pas de flip auto : steps validés sur surface sombre) --- */
  --chart-1: #7c6ffd;
  --chart-grid: #24242f;
  --chart-axis: #33333f;
  --chart-ink: #f1f1f6;
  --chart-muted: #9a9aa9;
  --cat-1: #3987e5; --cat-2: #199e70; --cat-3: #c98500; --cat-4: #008300;
  --cat-5: #9085e9; --cat-6: #e66767; --cat-7: #d55181; --cat-8: #d95926;
}