/* ============================================================
   THEME SYSTEM v5.0 — JSL Distribution
   - Source unique des tokens (light/dark) + layout tokens
   - Aucun style composant ici (uniquement variables)
   - Chargé après styles.css (legacy intouchable)
   ============================================================ */

:root {
  /* ---------- Palette premium (institutionnelle) ---------- */
  --premium-bg: #ffffff;
  --premium-fg: #0f172a;
  --premium-muted: #475569;
  --premium-card: #ffffff;
  --premium-border: #e5e7eb;
  --premium-border-strong: #d7dde6;
  --premium-primary-500: #2563eb;
  --premium-primary-600: #1d4ed8;

  /* ---------- Rayons / ombres / transitions ---------- */
  --premium-radius-8: 8px;
  --premium-radius-12: 12px;
  --premium-radius-16: 16px;
  --premium-shadow-1: 0 2px 10px rgba(15, 23, 42, .06);
  --premium-shadow-2: 0 14px 34px rgba(15, 23, 42, .10);
  --transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease;

  /* ---------- Mapping tokens legacy → premium (compat) ---------- */
  --bg: var(--premium-bg);
  --fg: var(--premium-fg);
  --muted: var(--premium-muted);
  --card: var(--premium-card);
  --border-strong: var(--premium-border);
  --primary-500: var(--premium-primary-500);
  --primary-600: var(--premium-primary-600);
  --primary: var(--premium-primary-500);
  --primary-dark: var(--premium-primary-600);
  --radius: var(--premium-radius-12);
  --shadow: var(--premium-shadow-1);
  --shadow-hover: var(--premium-shadow-2);

  /* ---------- Breakpoints (documentation / cohérence) ---------- */
  --bp-xs: 0px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-xxl: 1600px;

  /* ---------- Layout tokens (mobile-first) ---------- */
  --ui-pad-y: 10px;
  --ui-pad-x: 16px;
  --ui-content-max: 1100px;
  --ui-card-pad-y: 18px;
  --ui-card-pad-x: 18px;

  /* Safe-area (notch): symétrique pour garder le contenu visuellement centré */
  --ui-safe-lr: max(env(safe-area-inset-left), env(safe-area-inset-right));
  --ui-safe-t: env(safe-area-inset-top);
  --ui-safe-b: env(safe-area-inset-bottom);

  /* Typographie */
  --ui-font-base: 16px;
  --ui-h1: clamp(1.5rem, 1.2vw + 1.1rem, 2.25rem);
  --ui-h2: clamp(1.1rem, 0.8vw + 0.9rem, 1.6rem);
  --ui-h3: clamp(1.0rem, 0.6vw + 0.85rem, 1.25rem);

  /* Tables */
  --ui-table-font: 0.95rem;
  --ui-table-cell-pad: 0.9rem;

  /* Sections */
  --section-gap: clamp(14px, 2.0vw, 22px);

  /* Full occupation v4.x+ (compat v5) */
  --content-max: var(--ui-content-max);
  --page-pad-x: var(--ui-pad-x);
  --page-pad-y: var(--ui-pad-y);
  --card-pad-x: var(--ui-card-pad-x);
  --card-pad-y: var(--ui-card-pad-y);
  --grid-gap: clamp(12px, 1.2vw, 18px);

  /* ---------- Tokens nav/footer (public) — centralisés ---------- */
  --navxxxl-blue-1: #0A3D62;
  --navxxxl-blue-2: #154360;
  --navxxxl-blue-3: #1B4F72;
  --navxxxl-gray-1: #F4F6F7;
  --navxxxl-gray-2: #2C3E50;
  --navxxxl-white: #FFFFFF;
  --navxxxl-max: 1440px;
  --navxxxl-radius: 14px;
  --navxxxl-shadow: 0 8px 22px rgba(44, 62, 80, 0.18);
  --navxxxl-shadow-soft: 0 6px 16px rgba(44, 62, 80, 0.14);

  --footerxxxl-blue-1: #0A3D62;
  --footerxxxl-blue-2: #154360;
  --footerxxxl-blue-3: #1B4F72;
  --footerxxxl-gray-1: #F4F6F7;
  --footerxxxl-gray-2: #2C3E50;
  --footerxxxl-white: #FFFFFF;
  --footerxxxl-max: 1440px;
  --footerxxxl-radius: 16px;
  --footerxxxl-shadow-inset: inset 0 1px 0 rgba(244, 246, 247, 0.08);
  --footerxxxl-shadow-top: 0 -10px 24px rgba(44, 62, 80, 0.22);

  /* ---------- Charts (circular) — palette STRICTE ---------- */
  /* Autorisé uniquement: bleu primaire, bleu secondaire, gris clair, gris neutre, blanc */
  --chart-pie-blue-primary: var(--premium-primary-500);
  --chart-pie-blue-secondary: var(--premium-primary-600);
  --chart-pie-gray-light: var(--premium-border);
  --chart-pie-gray-neutral: var(--premium-muted);
  --chart-pie-white: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --premium-bg: #0b1220;
    --premium-fg: #e5e7eb;
    --premium-muted: #9aa4b2;
    --premium-card: #0f1623;
    --premium-border: #2b3442;
    --premium-border-strong: #303b4a;
    --premium-primary-500: #60a5fa;
    --premium-primary-600: #93c5fd;
    --premium-shadow-1: 0 2px 10px rgba(0, 0, 0, .35);
    --premium-shadow-2: 0 18px 40px rgba(0, 0, 0, .45);
  }
}

/* Dark mode manual/legacy classes: align on the same token palette */
:is(.theme-dark, body.theme-dark, .prefers-dark, body.prefers-dark, .dark-mode, body.dark-mode, html[data-theme="dark"]) {
  color-scheme: dark;
  --premium-bg: #0b1220;
  --premium-fg: #e5e7eb;
  --premium-muted: #9aa4b2;
  --premium-card: #0f1623;
  --premium-border: #2b3442;
  --premium-border-strong: #303b4a;
  --premium-primary-500: #60a5fa;
  --premium-primary-600: #93c5fd;
  --premium-shadow-1: 0 2px 10px rgba(0, 0, 0, .35);
  --premium-shadow-2: 0 18px 40px rgba(0, 0, 0, .45);
}

@media (min-width: 769px) and (max-width: 1023px) {
  :root {
    --ui-pad-y: 12px;
    --ui-pad-x: 20px;
    --ui-content-max: 1200px;
    --ui-card-pad-y: 30px;
    --ui-card-pad-x: 44px;
    --ui-font-base: 16px;
    --ui-table-font: 0.95rem;
    --ui-table-cell-pad: 0.9rem;
  }
}

@media (min-width: 1024px) and (max-width: 1919px) {
  :root {
    --ui-pad-y: 14px;
    --ui-pad-x: 28px;
    --ui-content-max: 1380px;
    --ui-card-pad-y: 34px;
    --ui-card-pad-x: 52px;
    --ui-font-base: 16px;
    --ui-table-font: 0.95rem;
    --ui-table-cell-pad: 0.95rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --ui-pad-y: 16px;
    --ui-pad-x: 44px;
    --ui-content-max: 1680px;
    --ui-card-pad-y: 42px;
    --ui-card-pad-x: 64px;
    --ui-font-base: 18px;
    --ui-h1: clamp(2.0rem, 1.0vw + 1.6rem, 2.8rem);
    --ui-h2: clamp(1.4rem, 0.8vw + 1.1rem, 2.0rem);
    --ui-h3: clamp(1.15rem, 0.6vw + 1.0rem, 1.5rem);
    --ui-table-font: 1.0rem;
    --ui-table-cell-pad: 1.0rem;
  }
}

@media (min-width: 2560px) {
  :root {
    --ui-pad-y: 18px;
    --ui-pad-x: 72px;
    --ui-content-max: 2200px;
    --ui-card-pad-y: 48px;
    --ui-card-pad-x: 76px;
    --ui-font-base: 19px;
    --ui-h1: clamp(2.2rem, 0.9vw + 1.9rem, 3.2rem);
    --ui-h2: clamp(1.5rem, 0.75vw + 1.25rem, 2.25rem);
    --ui-h3: clamp(1.2rem, 0.55vw + 1.05rem, 1.65rem);
    --ui-table-font: 1.05rem;
    --ui-table-cell-pad: 1.05rem;
  }
}

@media (max-width: 480px) {
  :root {
    --ui-pad-y: 8px;
    --ui-pad-x: 14px;
    --ui-card-pad-y: 16px;
    --ui-card-pad-x: 14px;
    --ui-table-font: 0.9rem;
    --ui-table-cell-pad: 0.75rem;
  }
}