/* ============================================================
   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: #f7f9fc;
  --premium-fg: #1a1a1a;
  --premium-muted: #4b5563;
  --premium-card: #ffffff;
  --premium-border: #e6e9ef;
  --premium-border-strong: #d7dde6;
  --premium-primary-500: #1f3c88;
  --premium-primary-600: #1a357a;
  --premium-accent-500: #c3002f;
  --premium-accent-600: #9f0026;

  /* ---------- Rayons / ombres / transitions ---------- */
  --premium-radius-8: 8px;
  --premium-radius-12: 12px;
  --premium-radius-16: 16px;
  --premium-shadow-1: 0 8px 30px rgba(0, 0, 0, 0.06);
  --premium-shadow-2: 0 14px 35px rgba(0, 0, 0, 0.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);
  --danger: var(--premium-accent-500);
  --danger-600: var(--premium-accent-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;

  /* AUDIT FIX DIFFÉRÉ 20260321 — Centralisation des tokens composants dans la source unique */

  /* ---------- Footer Enterprise XXL tokens ---------- */
  --fxxl-bg: #f8fafc;
  --fxxl-border: #e5e7eb;
  --fxxl-text: #0f172a;
  --fxxl-muted: #334155;
  --fxxl-subtle: #64748b;
  --fxxl-link: #0b3a8a;
  --fxxl-link-hover: #0a2f70;
  --fxxl-btn-border: rgba(11, 58, 138, 0.35);
  --fxxl-btn-bg: rgba(11, 58, 138, 0.06);

  /* ---------- Sidebar Enterprise tokens ---------- */
  --sidebar-width: 260px;
  --sidebar-border: #D9DEE8;
  --sidebar-surface: #F2F4F8;
  --sidebar-muted: #64748b;
  --sidebar-transition: 0.2s ease;

  /* ---------- Internal menu tokens ---------- */
  --menu-border: #e2e8f0;
  --menu-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  --menu-item-bg: #f8fafc;
  --menu-item-bg-hover: #f1f5f9;
  --menu-accent: #2563eb;
  --menu-text: #0f172a;
  --menu-muted: #64748b;
  --menu-overlay: rgba(2, 6, 23, 0.42);
  --drawer-width: min(21.25rem, 88vw);

  /* ---------- Sidebar Enterprise tokens ---------- (références thème) */
  --sidebar-bg: var(--premium-card);
  --sidebar-primary: var(--premium-primary-500);
  --sidebar-primary-hover: var(--premium-primary-600);
  --sidebar-text: var(--premium-primary-600);
  --sidebar-active-bar: var(--premium-primary-500);

  /* ---------- RH Enterprise tokens ---------- */
  --rh-text: #2B2F36;
  --rh-gray-50: #F2F4F8;
  --rh-border: #D9DEE8;
  --rh-blue-900: var(--premium-primary-600);
  --rh-blue-800: var(--premium-primary-600);
  --rh-blue-700: var(--premium-primary-500);
  --rh-white: var(--premium-card);
}

@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);
    /* AUDIT FIX DIFFÉRÉ: tokens footer dark mode centralisés */
    --fxxl-bg: #0b1220;
    --fxxl-border: rgba(148, 163, 184, 0.18);
    --fxxl-text: #e5e7eb;
    --fxxl-muted: #cbd5e1;
    --fxxl-subtle: #94a3b8;
    --fxxl-link: #93c5fd;
    --fxxl-link-hover: #bfdbfe;
    --fxxl-btn-border: rgba(147, 197, 253, 0.42);
    --fxxl-btn-bg: rgba(147, 197, 253, 0.08);
  }
}

/* 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);
  /* AUDIT FIX DIFFÉRÉ: tokens footer dark mode centralisés */
  --fxxl-bg: #0b1220;
  --fxxl-border: rgba(148, 163, 184, 0.18);
  --fxxl-text: #e5e7eb;
  --fxxl-muted: #cbd5e1;
  --fxxl-subtle: #94a3b8;
  --fxxl-link: #93c5fd;
  --fxxl-link-hover: #bfdbfe;
  --fxxl-btn-border: rgba(147, 197, 253, 0.42);
  --fxxl-btn-bg: rgba(147, 197, 253, 0.08);
}

@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;
  }
}