/* ==========================================================================
   Delomid CONNECT — jetons de design (seul fichier où les couleurs sont définies)

   Thème sombre (maquette « Delomid Connect ») :
   - fond de page #0A1020, barre latérale #101A2D, barre supérieure #0E1829,
     cartes #141F32, éléments secondaires #1B2B43, bordures #2A3B55 ;
   - texte blanc / #F6F8FD, texte secondaire #9CAAC1 ;
   - accents : bleu #367BFF (élément actif), magenta #E943B0, vert #30D3A9,
     jaune #F6C56F (étoiles).
   Lisibilité (WCAG AA, 4,5:1) : texte clair uniquement ; les liens magenta
   utilisent une teinte éclaircie (#F06BC4) pour rester lisibles sur les cartes.
   L'impression (export PDF) repasse en thème clair (bloc @media print en bas).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Marque */
  --brand-navy: #173767;            /* fond « actif » (bleu nuit de la maquette), texte blanc */
  --brand-magenta: #e943b0;
  --brand-blue: #367bff;
  --brand-white: #ffffff;
  --brand-gradient: linear-gradient(135deg, #1c2261 0%, #7b207e 65%, #eb3aab 100%);
  --hero-gradient: linear-gradient(135deg, #1c427b 0%, #1b2244 100%);

  /* Surfaces */
  --color-bg: #0a1020;
  --color-sidebar: #101a2d;
  --color-topbar: #0e1829;
  --color-surface: #141f32;
  --color-surface-muted: #1b2b43;
  --color-input: #101a2d;
  --color-border: #2a3b55;
  --color-border-strong: #3a4d6b;
  --color-navy-50: #1b2b43;
  --color-navy-100: #263a5c;
  --color-active: #173767;

  /* Texte */
  --color-text: #f6f8fd;
  --color-text-secondary: #9caac1;
  --color-text-muted: #71849e;
  --color-text-on-dark: #ffffff;
  --color-link: #f06bc4;
  --color-focus: #367bff;
  --color-star: #f6c56f;

  /* Sémantique (toujours accompagnée d'une icône ou d'un libellé) */
  --color-success: #30d3a9;
  --color-success-bg: #183c36;
  --color-warning: #f6c56f;
  --color-warning-bg: #3a2f1a;
  --color-danger: #ff7a85;
  --color-danger-solid: #d63848;    /* fonds pleins avec texte blanc (bouton « Supprimer ») */
  --color-danger-bg: #3b1d27;
  --color-info: #9dbeff;
  --color-info-bg: #173767;

  /* Couleurs de graphiques (dérivées de la maquette) */
  --chart-1: #367bff;
  --chart-2: #e943b0;
  --chart-3: #71849e;
  --chart-4: #30d3a9;
  --chart-5: #f6c56f;
  /* Séries de tags (statistiques) : palette catégorielle validée (daltonisme, contraste) sur la surface sombre */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;

  /* Typographie */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Espacements */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Formes et profondeur */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(4, 6, 14, 0.3);
  --shadow-md: 0 6px 28px rgba(4, 6, 14, 0.18);
  --shadow-lg: 0 16px 48px rgba(4, 6, 14, 0.45);
  --ring: 0 0 0 3px rgba(54, 123, 255, 0.4);
  --backdrop: rgba(4, 6, 14, 0.65);

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 400ms;

  /* Mise en page */
  --sidebar-width: 264px;
  --sidebar-collapsed: 76px;
  --topbar-height: 64px;
  --content-max: 1280px;

  --z-sticky: 10;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* Aperçus de publication : couleurs des plateformes elles-mêmes (rendu fidèle, toujours clair) */
  --preview-bg: #ffffff;
  --preview-text: #1c1e21;
  --preview-muted: #65676b;
  --preview-border: #dadde1;
  --preview-soft: #f0f2f5;
  --preview-link: #385898;
  --preview-google-blue: #1a73e8;
  --preview-ig-tag: #00376b;
  --preview-ig-ring: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  --preview-phone-bg: #000000;
}

/* ==========================================================================
   Thème clair (Paramètres › Apparence) : contenu clair, barre latérale bleu nuit.
   Lisibilité (WCAG AA, 4,5:1) : texte bleu nuit sur fonds clairs ; liens et états
   en teintes foncées. « Système » : la teinte est choisie par assets/js/theme.js
   selon les préférences de l'appareil (attribut data-theme posé avant l'affichage).
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --brand-navy: #19254d;
  --color-bg: #edf2f9;
  --color-topbar: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f2f5fa;
  --color-input: #ffffff;
  --color-border: #d6deea;
  --color-border-strong: #b6c2d5;
  --color-navy-50: #eef3fa;
  --color-navy-100: #dbe5f2;
  --color-active: #e2ebff;
  --color-text: #14213d;
  --color-text-secondary: #4b5873;
  --color-text-muted: #5b6880;
  --color-link: #b8158f;
  --color-focus: #2563eb;
  --color-star: #b7791f;
  --color-success: #11795a;
  --color-success-bg: #e2f5ed;
  --color-warning: #8f5207;
  --color-warning-bg: #fff2d9;
  --color-danger: #c22a3a;
  --color-danger-solid: #c22a3a;
  --color-danger-bg: #fdebee;
  --color-info: #1d4ed8;
  --color-info-bg: #e5edff;
  --chart-1: #2563eb;
  --chart-2: #c92c97;
  --chart-3: #7a869e;
  --chart-4: #138a6a;
  --chart-5: #c08419;
  --series-1: #2a78d6;
  --series-2: #d4592a;
  --series-3: #16996a;
  --series-4: #c98500;
  --series-5: #d24f82;
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.08);
  --shadow-md: 0 6px 24px rgba(20, 33, 61, 0.08);
  --shadow-lg: 0 16px 48px rgba(20, 33, 61, 0.18);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
  --backdrop: rgba(20, 33, 61, 0.45);
}
/* La barre latérale garde la palette sombre en thème clair */
:root[data-theme="light"] .sidebar {
  color-scheme: dark;
  --color-text: #f6f8fd;
  --color-text-secondary: #9caac1;
  --color-text-muted: #71849e;
  --color-border: #2a3b55;
  --color-border-strong: #3a4d6b;
  --color-active: #173767;
  --color-surface: #141f32;
  --color-surface-muted: #1b2b43;
  --color-navy-100: #263a5c;
  --color-focus: #367bff;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}

/* Impression / export PDF : thème clair, plus lisible sur papier */
@media print {
  :root {
    color-scheme: light;
    --brand-navy: #19254d;
    --brand-magenta: #d602b3;
    --brand-gradient: linear-gradient(135deg, #19254d 0%, #d602b3 100%);
    --color-bg: #ffffff;
    --color-sidebar: #19254d;
    --color-topbar: #ffffff;
    --color-surface: #ffffff;
    --color-surface-muted: #f8f9fc;
    --color-input: #ffffff;
    --color-border: #e3e6f0;
    --color-border-strong: #c9cee0;
    --color-navy-50: #eef0f7;
    --color-navy-100: #dfe3ef;
    --color-active: #19254d;
    --color-text: #19254d;
    --color-text-secondary: #5b6485;
    --color-text-muted: #5b6485;
    --color-link: #d602b3;
    --color-star: #b7791f;
    --color-success: #146c43;
    --color-success-bg: #e7f5ee;
    --color-warning: #8a4b00;
    --color-warning-bg: #fff4e0;
    --color-danger: #b42318;
    --color-danger-bg: #fdecea;
    --color-info: #19254d;
    --color-info-bg: #eef0f7;
    --chart-1: #19254d;
    --chart-2: #d602b3;
    --chart-3: #7a83a8;
    --chart-4: #2f9e7f;
    --chart-5: #c58a1c;
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
  }
}
