/*
  Jetons de conception du design system Dux.

  Deux sources :
  - le logotype fournit les couleurs de marque (taupe #4b4340, cyan #3ab8d5) ;
  - les maquettes de référence fournissent le registre visuel : surfaces claires,
    cartes blanches élevées sur un fond gris très clair, rayons généreux.

  La barre latérale est CLAIRE : elle partage les surfaces du contenu au lieu de
  s'y opposer. Le taupe de la marque reste la couleur du texte, pas celle des fonds.

  Règle : aucune valeur de couleur, d'espacement, de rayon ou d'ombre n'est écrite
  en dur ailleurs que dans ce fichier. Les composants ne consomment que des variables.

  Le thème sombre n'est pas livré ; l'architecture est prête pour lui : il suffira
  d'ajouter un bloc [data-theme="dark"] redéfinissant les mêmes variables sémantiques.
*/

:root {
    /* --- Palette de marque ------------------------------------------------ */

    /* Cyan du logotype. Le 400 est la teinte exacte de la marque ; elle n'atteint
       que 2,3:1 sur blanc, donc elle sert d'accent et jamais de fond de texte. */
    --palette-cyan-50: #eff9fc;
    --palette-cyan-100: #d3eef6;
    --palette-cyan-200: #b0e2ef;
    --palette-cyan-300: #7fd0e6;
    --palette-cyan-400: #3ab8d5;
    --palette-cyan-600: #17758c;
    --palette-cyan-700: #115a6c;

    /* Taupe du logotype et neutres chauds accordés dessus. */
    --palette-taupe-900: #2f2a28;
    --palette-taupe-800: #4b4340;
    --palette-taupe-700: #5c534f;

    --palette-neutral-0: #ffffff;
    --palette-neutral-25: #fafafb;
    --palette-neutral-50: #f4f4f6;
    --palette-neutral-75: #eeeef1;
    --palette-neutral-100: #e7e6ea;
    --palette-neutral-200: #d8d6db;
    /* Assombri par rapport au gris de repos habituel : ce ton porte du vrai texte
       (légendes, horodatages, surtitres) et doit tenir 4,5:1 sur le fond de page. */
    --palette-neutral-400: #736e72;
    --palette-neutral-600: #55504f;
    --palette-neutral-900: #2f2a28;

    /* États. */
    --palette-amber-100: #fbeed7;
    --palette-amber-600: #96690f;
    --palette-red-100: #fae3e1;
    --palette-red-600: #b03a30;
    --palette-green-100: #dbefe3;
    --palette-green-600: #1b7f57;

    /* Accents d'espace. Un module choisit le sien ; ils servent de vignettes et de
       tuiles d'icône, jamais de fond pour du texte long. */
    --palette-violet-600: #5b4fc4;
    --palette-rose-600: #a8465e;

    /* --- Couleurs sémantiques -------------------------------------------- */

    /* Cyan assombri : 5,3:1 sur blanc, donc utilisable en fond de bouton et en lien. */
    --color-primary: var(--palette-cyan-600);
    --color-primary-hover: var(--palette-cyan-700);
    --color-primary-soft: var(--palette-cyan-100);
    --color-primary-softer: var(--palette-cyan-50);
    --color-on-primary: var(--palette-neutral-0);

    /* Teinte exacte du logo, réservée aux marqueurs graphiques. */
    --color-accent: var(--palette-cyan-400);

    --color-background: var(--palette-neutral-50);
    --color-surface: var(--palette-neutral-0);
    --color-surface-muted: var(--palette-neutral-25);
    --color-surface-sunken: var(--palette-neutral-75);
    --color-border: var(--palette-neutral-200);
    --color-border-subtle: var(--palette-neutral-100);

    --color-text: var(--palette-neutral-900);
    --color-text-secondary: var(--palette-neutral-600);
    --color-muted: var(--palette-neutral-400);

    --color-success: var(--palette-green-600);
    --color-success-soft: var(--palette-green-100);
    --color-warning: var(--palette-amber-600);
    --color-warning-soft: var(--palette-amber-100);
    --color-danger: var(--palette-red-600);
    --color-danger-soft: var(--palette-red-100);
    --color-info: var(--palette-cyan-600);
    --color-info-soft: var(--palette-cyan-50);

    /* Accents d'espace, adressés par nom depuis IFrontendModule.Accent. */
    --color-space-primary: var(--palette-cyan-600);
    --color-space-violet: var(--palette-violet-600);
    --color-space-green: var(--palette-green-600);
    --color-space-amber: var(--palette-amber-600);
    --color-space-rose: var(--palette-rose-600);

    /* --- Barre latérale claire -------------------------------------------- */
    --color-sidebar-surface: var(--palette-neutral-25);
    --color-sidebar-card: var(--palette-neutral-0);
    --color-sidebar-text: var(--palette-neutral-600);
    --color-sidebar-text-strong: var(--palette-neutral-900);
    --color-sidebar-muted: var(--palette-neutral-400);
    --color-sidebar-border: var(--palette-neutral-100);
    --color-sidebar-hover: var(--palette-neutral-50);
    --color-sidebar-active-surface: var(--color-primary-softer);
    --color-sidebar-active-text: var(--color-primary);
    --color-sidebar-active-marker: var(--color-accent);

    --color-overlay: rgba(47, 42, 40, 0.5);
    --color-focus-ring: var(--palette-cyan-400);

    /* --- Espacements ------------------------------------------------------ */
    --spacing-2xs: 0.125rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;

    /* --- Rayons. Plus généreux que la moyenne : c'est le trait dominant des
           maquettes de référence, et il porte à lui seul une bonne part du style. */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* --- Ombres. Diffuses et peu contrastées : les cartes se détachent par
           l'élévation, pas par un trait. */
    --shadow-sm: 0 1px 2px rgba(47, 42, 40, 0.05), 0 1px 3px rgba(47, 42, 40, 0.04);
    --shadow-md: 0 2px 6px rgba(47, 42, 40, 0.06), 0 8px 24px rgba(47, 42, 40, 0.06);
    --shadow-lg: 0 12px 40px rgba(47, 42, 40, 0.12);

    /* --- Typographie ------------------------------------------------------ */
    --font-family-base: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.9375rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.75rem;
    --font-size-2xl: 2.25rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.5;

    /* --- Structure -------------------------------------------------------- */
    --sidebar-width: 17rem;
    --sidebar-width-collapsed: 4.5rem;
    /* Plafond de largeur du contenu. 96rem (1536 px) laissait une bande vide à droite
       dès 1600 px de large, et gaspillait la place gagnée en repliant le menu. */
    --content-max-width: 140rem;

    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
}

/*
  Réservé au thème sombre à venir. Les composants n'ont rien à changer :
  seules les variables sémantiques ci-dessus seront redéfinies ici.
*/
[data-theme="dark"] {
    color-scheme: dark;
}