/* Souffleur — design tokens
   Direction visuelle validée le 25/09/2026 : « Papier & encre » (thème par défaut).
   Référence visuelle (A = retenue, B « Scène » = thème alternatif possible) : https://claude.ai/artifact/VDC5wMo3oTSVfvymN2pN6Q
   Thèmes alternatifs : un bloc html:root[data-palette="…"] qui redéfinit les couleurs et les polices
   ci-dessous (mêmes noms), sans toucher aux composants (cf. DESIGN.md). Disponibles : « Scène » (#29), « Violet », « Prune »,
   « Lagon » et « Ardoise » (#147), en fin de fichier.
   Polices : Google Fonts — Newsreader (titres) + DM Sans (texte), chargées dans index.html.
*/

:root {
  /* Thèmes : chaque couleur porte ses deux valeurs, light-dark(clair, sombre).
     Par défaut, l'app suit le réglage de l'appareil (mode système) ; ThemeService force
     un mode en posant data-theme="light" | "dark" sur <html> (cf. règles en fin de fichier). */

  /* Aperçu des palettes (Réglages › Apparence) : l'accent de chaque palette, visible quelle que soit la palette active.
     Jamais utilisé ailleurs ; à garder aligné sur --color-accent de chaque bloc data-palette. */
  --apercu-papier: light-dark(#8C2F39, #E3919A);
  --apercu-scene: light-dark(#A4621A, #F0B45C);
  --apercu-violet: light-dark(#5B3FA6, #B9A4F2);
  --apercu-prune: light-dark(#8A2A6B, #E39BCB);
  --apercu-lagon: light-dark(#0F6F7A, #6CCBD4);
  --apercu-ardoise: light-dark(#3D4A5C, #AFC0D6);

  /* Base */
  --color-bg: light-dark(#F7F4EE, #16151A);            /* Papier — fond général */
  --color-bg-card: light-dark(#FFFFFF, #211F26);       /* fond des cartes, barres, feuilles */
  --color-bg-muted: light-dark(#EFEAE1, #2A2830);      /* fond neutre discret (tags de statut, zones inactives) */
  --color-ink: light-dark(#1F1D24, #EFEBE4);           /* Encre — texte principal */
  --color-ink-secondary: light-dark(#6B6770, #A39EA7); /* texte secondaire, labels, réplique passée */
  --color-border: light-dark(#E6E1D8, #35323B);        /* séparateurs, contours légers, texte effacé */

  /* Accent — marque, action principale, « à toi » (velours du rideau ; éclairci en sombre) */
  --color-accent: light-dark(#8C2F39, #E3919A);        /* Bordeaux */
  --color-accent-bg: light-dark(#F4E4E4, #3B2328);     /* fond des badges d'accent */
  --color-on-accent: light-dark(#FFFFFF, #16151A);     /* texte / icône posé sur l'accent */

  /* Feedback — messages info / avertissement / erreur / succès, bouton Destructif.
     Jamais pour la marque. Texte ≥ 6:1 sur son fond, en clair comme en sombre. */
  --color-info-bg: light-dark(#E8EEF5, #1E2633);
  --color-info-ink: light-dark(#33587F, #9DB9DC);
  --color-info-border: light-dark(#C5D3E5, #33445A);
  --color-warn-bg: light-dark(#F8EDD3, #2D2616);
  --color-warn-ink: light-dark(#6E5209, #E2C27A);
  --color-warn-border: light-dark(#E9D29C, #54451F);
  --color-error-bg: light-dark(#FBEADF, #33211A);     /* Vermillon : orangé, pour ne jamais se confondre */
  --color-error-ink: light-dark(#983209, #F4A26F);    /* avec l'accent bordeaux (bouton Destructif ≠ Primaire) */
  --color-error-border: light-dark(#F0CBB5, #5E3522);
  --color-success-bg: light-dark(#E9F0E6, #1F2A1D);
  --color-success-ink: light-dark(#3A6234, #A8CC9E);
  --color-success-border: light-dark(#C6D8C0, #3A5234);

  /* Typographie */
  --font-display: 'Newsreader', serif;  /* titres d'écran, texte des répliques en session */
  --font-body: 'DM Sans', sans-serif;   /* tout le reste */

  /* Échelle de texte */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-display-sm: 22px;
  --text-display-md: 30px;
  --text-display-lg: 34px;

  /* Échelle d'espacement (multiples de 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Cible tactile minimale (mobile first) ; boutons de session plus grands (jeu, mains occupées) */
  --tap-target-min: 44px;
  --tap-target-session: 56px;

  /* Grands écrans (#139, cf. DESIGN.md › Tablette et desktop). Points de rupture : 768 px (tablette) et 1200 px (desktop),
     écrits dans les @media (min-width) — une variable CSS n'y est pas utilisable — et dans core/gabarit.ts. */
  --layout-lecture-max: 42rem;       /* texte à lire, formulaires, aide, réglages : ligne de lecture confortable */
  --layout-contenu-max: 72rem;       /* listes, grilles de cartes, tableaux de bord */
  --layout-gouttiere: var(--space-5);/* marge latérale d'un écran (mobile) ; agrandie par gabarit ci-dessous */
  --layout-nav-rail: 88px;           /* navigation en rail (tablette) */
  --layout-nav-barre: 208px;         /* navigation en barre latérale (desktop) */
  --layout-liste-hauteur-min: 12rem; /* hauteur minimale d'une liste qui défile dans son bloc (progression d'une pièce, #388) */
  --layout-modale: 32rem;            /* modale centrée (tablette et desktop, #277) */
  --layout-modale-large: 56rem;      /* modale centrée large (tablette et desktop, #335) : offres côte à côte */
  --layout-panneau: 28rem;           /* panneau d'édition latéral (desktop) */
  --ligne-col-infos: 14rem;          /* lignes alignées (#219) : colonne « rôle et détail » */
  --ligne-col-statut: 10rem;         /* lignes alignées : colonne du statut (pastille alignée à gauche) */
  --ligne-col-selection: 24rem;      /* lignes alignées : colonne d'une liste déroulante (voix #224) */
  --ligne-col-actions: 6rem;         /* lignes alignées : colonne des icônes (renommer, supprimer) */
  --layout-gap-grille: var(--space-4);
  --focus-anneau: 2px;               /* épaisseur de l'anneau de focus clavier / souris */

  /* Graphiques (progression, #28) : hauteur du tracé. */
  --chart-height: 220px;

  /* Découpage (#115) : hauteur estimée d'une réplique hors écran (`contain-intrinsic-size`), pour que la liste garde sa
     longueur et défile sans à-coups sans peindre les répliques qui ne sont pas visibles. */
  --replique-hauteur-estimee: 72px;

  /* Mouvement (#96) : apparitions discrètes (fondu + léger glissement), jamais d'animation en boucle.
     Neutralisé si l'appareil demande de réduire les animations. */
  --motion-duration: 400ms;   /* apparition / disparition d'un bloc */
  --motion-stagger: 450ms;    /* écart entre deux éléments qui apparaissent l'un après l'autre */
  --motion-offset: 8px;       /* glissement vertical à l'apparition */
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Thème alternatif « Scène » (#29, référence visuelle B) : le plateau — neutres gris ardoise, nuit profonde en sombre,
   un seul accent ambré (la lumière du projecteur), tout en sans-serif (Outfit + Figtree, chargées par ThemeService
   seulement si ce thème est choisi). Posé par ThemeService : data-palette="scene" sur <html>.
   L'erreur y devient un rouge franc : le vermillon de « Papier & encre » serait trop proche de l'accent ambré. */
html:root[data-palette="scene"] {
  --color-bg: light-dark(#F2F3F5, #0F1217);
  --color-bg-card: light-dark(#FFFFFF, #1A1E26);
  --color-bg-muted: light-dark(#E8EAEE, #232833);
  --color-ink: light-dark(#161A22, #ECEEF2);
  --color-ink-secondary: light-dark(#626977, #9AA1AD);
  --color-border: light-dark(#DDE0E6, #2C313B);
  --color-accent: light-dark(#A4621A, #F0B45C);
  --color-accent-bg: light-dark(#F6EADA, #3A2C17);
  --color-on-accent: light-dark(#FFFFFF, #0F1217);
  --color-error-bg: light-dark(#FBE9E9, #331A1C);
  --color-error-ink: light-dark(#A11D2B, #F6A3A8);
  --color-error-border: light-dark(#F0C4C7, #5E2A2F);
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Figtree', sans-serif;
}

/* Palettes « Violet », « Prune », « Lagon » et « Ardoise » (#147) : mêmes tokens que « Papier & encre », polices inchangées.
   L'accent évite les teintes du feedback (rouge / orange = erreur, ambre = avertissement, vert = succès, bleu = info) ;
   les couleurs de feedback restent celles de « Papier & encre ». Contrastes WCAG AA vérifiés par `npm run contraste`. */
html:root[data-palette="violet"] {
  --color-bg: light-dark(#F6F4FA, #14121C);
  --color-bg-card: light-dark(#FFFFFF, #1E1B29);
  --color-bg-muted: light-dark(#ECE8F3, #282438);
  --color-ink: light-dark(#1F1B2E, #ECE8F5);
  --color-ink-secondary: light-dark(#625C79, #A49DB8);
  --color-border: light-dark(#E1DCEC, #352F48);
  --color-accent: light-dark(#5B3FA6, #B9A4F2);
  --color-accent-bg: light-dark(#EAE4F7, #2C2545);
  --color-on-accent: light-dark(#FFFFFF, #14121C);
}

html:root[data-palette="prune"] {
  --color-bg: light-dark(#F9F3F6, #181117);
  --color-bg-card: light-dark(#FFFFFF, #221822);
  --color-bg-muted: light-dark(#F0E5EC, #2C222C);
  --color-ink: light-dark(#2A1B27, #F2E8F0);
  --color-ink-secondary: light-dark(#71596E, #B29FAE);
  --color-border: light-dark(#E9DCE4, #3F3040);
  --color-accent: light-dark(#8A2A6B, #E39BCB);
  --color-accent-bg: light-dark(#F6E2EE, #3D2237);
  --color-on-accent: light-dark(#FFFFFF, #181117);
}

html:root[data-palette="lagon"] {
  --color-bg: light-dark(#F1F6F6, #0E1617);
  --color-bg-card: light-dark(#FFFFFF, #172124);
  --color-bg-muted: light-dark(#E2ECEC, #1F2C2F);
  --color-ink: light-dark(#132428, #E5F0F1);
  --color-ink-secondary: light-dark(#4E666C, #94ADB2);
  --color-border: light-dark(#D6E3E4, #2A3B3F);
  --color-accent: light-dark(#0F6F7A, #6CCBD4);
  --color-accent-bg: light-dark(#DBEFF1, #16363A);
  --color-on-accent: light-dark(#FFFFFF, #0E1617);
}

html:root[data-palette="ardoise"] {
  --color-bg: light-dark(#F3F4F6, #101317);
  --color-bg-card: light-dark(#FFFFFF, #191D23);
  --color-bg-muted: light-dark(#E7E9ED, #22272E);
  --color-ink: light-dark(#1B1F26, #E9ECF0);
  --color-ink-secondary: light-dark(#58606D, #9BA3AF);
  --color-border: light-dark(#DCDFE4, #2E343D);
  --color-accent: light-dark(#3D4A5C, #AFC0D6);
  --color-accent-bg: light-dark(#E4E8EE, #26303D);
  --color-on-accent: light-dark(#FFFFFF, #101317);
}

/* Grands écrans (#139) : gouttière et espacement des grilles augmentent avec le gabarit. */
@media (min-width: 768px) {
  :root {
    --layout-gouttiere: var(--space-8);
    --layout-gap-grille: var(--space-5);
  }
}

@media (min-width: 1200px) {
  :root {
    --layout-gouttiere: var(--space-10);
    --layout-gap-grille: var(--space-6);
  }
}

/* Mode système : suit l'appareil. Sélecteur html:root (plus spécifique que :root) car PrimeNG
   injecte après nous « :root { color-scheme: light } », qui bloquerait sinon le mode sombre. */
html:root { color-scheme: light dark; }

/* Mode forcé par l'utilisateur (ThemeService) ; sans attribut = mode système. */
html:root[data-theme="light"] { color-scheme: light; }
html:root[data-theme="dark"] { color-scheme: dark; }