/*
 * UVCW UI — jetons de design communs aux applications de l'UVCW.
 *
 * Toute valeur visuelle (couleur, arrondi, ombre, espacement, police, mouvement) passe par ces
 * variables : une application peut définir ses propres jetons, mais en s'appuyant sur ceux-ci.
 * Mode sombre : désactivé pour l'instant (toujours clair). Ses jetons restent en réserve sous
 * `data-theme="dark"` sur <html>, que rien ne pose aujourd'hui (seule la vitrine permet de l'essayer).
 */
:root {
  /* --- Couleurs de base --- */

  /* Noir maximum de l'interface (#333333 = noir à 80 %) : jamais de noir plus foncé, jamais de #000 écrit en dur. */
  --uvcw-black: #333333;
  /* Texte principal : le noir maximum en clair, blanc cassé en sombre. */
  --uvcw-ink: var(--uvcw-black);
  --uvcw-ink-muted: #6e6e73;
  --uvcw-ink-faint: #8e8e93;
  --uvcw-bg: #f5f5f7;
  --uvcw-surface: #ffffff;
  --uvcw-hairline: rgb(0 0 0 / 0.08);
  /* Boutons principaux : le noir maximum, texte blanc. */
  --uvcw-accent: var(--uvcw-black);
  --uvcw-accent-contrast: #ffffff;
  /* Picto ou texte posé sur une couleur ou une photo (icône d'application, légende, bouton sur photo) :
     blanc dans les deux modes. */
  --uvcw-on-color: #ffffff;

  /* Vert UNIQUE (vert « Messages ») : élément actif, publier, terminé. Jamais d'autre vert. */
  --uvcw-green: #34c759;
  --uvcw-active: var(--uvcw-green);
  /* Rouge de notification (pastille, « Nouveau ») ; rouge d'erreur et d'action destructrice. */
  --uvcw-red: #ff3b30;
  --uvcw-danger: #e5484d;
  /* Texte d'erreur (message, champ invalide) : rouge assez foncé pour être lisible sur blanc (AA). */
  --uvcw-danger-text: #b3261e;
  --uvcw-orange: #f5a524;
  /* Texte d'alerte (avertissement, « Faible définition ») : orange lisible sur blanc. */
  --uvcw-warning: #c77700;
  /* Favori (cœur plein). */
  --uvcw-favorite: #ff4d6a;
  /* Voyants d'avancement : à traiter, en cours, terminé. */
  --uvcw-status-todo: var(--uvcw-danger);
  --uvcw-status-partial: var(--uvcw-orange);
  --uvcw-status-done: var(--uvcw-green);

  /* Verre (bandeau, panneaux posés sur une photo). */
  --uvcw-glass-bg: rgb(255 255 255 / 0.85);
  --uvcw-glass-border: rgb(255 255 255 / 0.5);
  --uvcw-glass-blur: blur(20px) saturate(1.6);
  /* Contour d'un champ posé sur une photo : au repos, puis à la saisie. */
  --uvcw-glass-focus: rgb(255 255 255 / 0.45);
  --uvcw-glass-focus-strong: rgb(255 255 255 / 0.75);

  /* Sur une photo : dégradé sous une légende, ombre d'un titre. */
  --uvcw-scrim: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
  --uvcw-text-shadow-photo: 0 2px 24px rgb(0 0 0 / 0.25);

  /* --- Typographie --- */

  --uvcw-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  /* Échelle unique des tailles de texte : aucune autre taille dans les applications. */
  --uvcw-text-2xs: 0.72rem; /* étiquette minuscule, compteur */
  --uvcw-text-xs: 0.78rem; /* petites capitales, mention discrète */
  --uvcw-text-sm: 0.86rem; /* texte secondaire, boutons compacts */
  --uvcw-text-md: 0.92rem; /* texte d'interface courant, boutons, champs */
  --uvcw-text-base: 1rem; /* texte de lecture */
  --uvcw-text-lg: 1.1rem; /* intitulé de cadre */
  --uvcw-text-xl: 1.25rem; /* petit titre */
  --uvcw-text-2xl: 1.4rem; /* titre de fenêtre, chiffre mis en avant */
  --uvcw-title-3: clamp(1.2rem, 2vw, 1.45rem);
  --uvcw-title-2: clamp(1.4rem, 2.4vw, 1.8rem);
  --uvcw-title-1: clamp(1.6rem, 3vw, 2.1rem);
  --uvcw-title-display: clamp(2rem, 3.6vw, 2.7rem);

  /* --- Formes --- */

  /* Photos : angles à peine cassés. Cadres : 14 px. Boutons et champs : pilules. */
  --uvcw-radius-photo: 3px;
  --uvcw-radius-sm: 8px;
  /* Menus, listes de suggestions, panneaux flottants, icônes d'application. */
  --uvcw-radius-panel: 12px;
  --uvcw-radius-md: 14px;
  --uvcw-radius-lg: 20px;
  --uvcw-radius-pill: 999px;
  --uvcw-shadow-float: 0 12px 40px rgb(0 0 0 / 0.18);
  --uvcw-shadow-raised: 0 1px 3px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.04);
  --uvcw-shadow-hover: 0 14px 34px rgb(0 0 0 / 0.08);

  /* --- Espacements (grille de 4 px) --- */

  --uvcw-space-1: 4px;
  --uvcw-space-2: 8px;
  --uvcw-space-3: 12px;
  --uvcw-space-4: 16px;
  --uvcw-space-5: 22px;
  --uvcw-space-6: 28px;
  --uvcw-space-7: 40px;
  --uvcw-space-8: 56px;
  --uvcw-page-gutter: clamp(16px, 4vw, 40px);
  --uvcw-page-max: 1680px;

  /* --- Mouvement (fluide, jamais bloquant ; voir prefers-reduced-motion) --- */

  --uvcw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --uvcw-duration-fast: 0.15s;
  --uvcw-duration: 0.25s;

  /* Hauteur du bandeau : les surimpressions plein écran des applications commencent dessous. */
  --uvcw-topbar-height: 64px;

  color-scheme: light;
}

/* Mode sombre, en réserve : appliqué seulement si `data-theme="dark"` est posé sur <html>. */
:root[data-theme='dark'] {
  --uvcw-ink: #f5f5f7;
  --uvcw-ink-muted: #98989d;
  --uvcw-ink-faint: #6e6e73;
  --uvcw-bg: #000000;
  --uvcw-surface: #1c1c1e;
  --uvcw-hairline: rgb(255 255 255 / 0.1);
  --uvcw-accent: #e6e6e6;
  --uvcw-accent-contrast: var(--uvcw-black);
  --uvcw-green: #30d158;
  --uvcw-danger-text: #ff6961;
  --uvcw-warning: #ffb340;
  color-scheme: dark;
}