/* palace-tech — systeme de design "Trianon" (jetons de role).
   Reference : docs/lots/LOT-PALACE-TECH.cadrage-ecrans.md §1 (repo istari-ops)
   pour les couleurs et la mise en page (inchangees), et §1 bis (revision
   typographique du 2026-09-07, REMPLACE le volet typo du §1) pour l'echelle
   ci-dessous. Grammaire derivee de la page d'un palace (epure, luxe, clair
   d'abord) — jamais copiee : aucun monogramme, aucun logo, aucun nom d'hotel
   dans le produit. Marque JH Digital, distincte de la charte Istari Conseil.

   Public vise : directeur technique et techniciens peu a l'aise avec le
   telephone, en local technique mal eclaire, parfois avec des gants, parfois
   presbytes. Lisibilite d'abord -- l'elegance passe par l'espace et la
   couleur, jamais par la finesse. Regles dures (verifiees par
   test/typographie-planchers.test.js) : aucun texte sous 15px, aucune
   graisse sous 500 sur du texte lu.

   Convention de theme : clair par defaut sur :root ; sombre derive soit par
   preference systeme (prefers-color-scheme, tant qu'aucun choix explicite
   n'est memorise), soit par choix explicite [data-theme="dark"] / "light"
   memorise dans localStorage (voir public/js/ui.js). */

:root {
  /* -- couleurs de role (clair, defaut) -- */
  --bg: #FFFFFF;
  --surface: #F4F2EE;
  --surface-raised: #FFFFFF;
  --ink: #1C1C1C;
  /* --muted releve a #4A4844 le 07/09 (revision typo, cadrage §1 bis) :
     9,1:1 sur --bg, 8,2:1 sur --surface (etait #6B6864, 5,5:1) -- mesures au
     script jetable, contraste AA strict largement depasse. */
  --muted: #4A4844;
  --rule: #D9D6D0;
  --primary: #0B2A5B;
  --primary-ink: #FFFFFF;
  --accent: #8FA894;
  --warn: #B08A3E;
  --alert: #A6412E;
  --alert-ink: #FFFFFF;
  /* jetons de TEXTE (contraste WCAG AA sur --bg), distincts des jetons
     decoratifs --accent/--warn ci-dessus qui restent trop clairs pour porter
     des caracteres (2,3:1 et 3,1:1 mesures, correctif controle 2 07/09).
     --accent/--warn restent reserves aux filets, soulignements, bordures de
     badge et la bande de tolerance de la courbe -- jamais du texte. */
  --accent-ink: #4E6B55; /* 5,9:1 sur #FFFFFF */
  --warn-ink: #7A5B1E; /* 6,3:1 sur #FFFFFF */
  --overlay: rgba(28, 28, 28, 0.5);
  --shadow: none; /* aucune ombre portee, cf. cadrage §1 */

  /* fonds faibles des badges d'etat (clair) */
  --accent-faint: #EAF0EB;
  --warn-faint: #F7EFDE;
  --alert-faint: #F5E4E0;
  --muted-faint: #ECEAE6;

  /* -- typographie (revision 2026-09-07, cadrage §1 bis) --
     Manrope porte tout le texte lu (corps, titres, etiquettes, boutons) ;
     IBM Plex Mono porte les donnees et horodatages ; Jost ne survit qu'a la
     signature de marque de la barre laterale (.sidebar-brand), nulle part
     ailleurs -- Cormorant Garamond est retire. --font-display et --font-body
     pointent tous deux vers Manrope (conserves comme DEUX jetons pour ne pas
     casser les usages existants dans components.css/HTML ; ils partagent
     desormais la meme police, la hierarchie se fait par taille/graisse). */
  --font-display: 'Manrope', 'Century Gothic', 'Futura', Arial, sans-serif;
  --font-body: 'Manrope', 'Century Gothic', 'Futura', Arial, sans-serif;
  --font-brand: 'Jost', 'Century Gothic', 'Futura', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Echelle typographique (table du cadrage §1 bis). Toutes les valeurs
     resolvent au-dessus du plancher de 15px et de la graisse 500 -- garde
     automatisee : test/typographie-planchers.test.js. */
  --size-body: 18px; /* 17px des 1024px, cf. media query plus bas */
  --size-strong: var(--size-body); /* texte important : meme taille, graisse 700 */
  --size-page-title: 30px; /* 34px des 1024px */
  --size-section-title: 22px;
  --size-label: 15px; /* etiquettes et eyebrows, capitales, interlettrage 0,08em */
  --size-small: 15px; /* plancher absolu du texte secondaire (hint/meta) */
  --size-data: 17px; /* donnees et horodatages, Plex Mono 600 */
  --size-button: 18px;
  --size-reading: 24px; /* releves saisis de ronde, lus a bout de bras */

  --weight-body: 500;
  --weight-strong: 700;
  --weight-page-title: 800;
  --weight-section-title: 700;
  --weight-label: 700;
  --weight-data: 600;
  --weight-button: 700;
  --weight-reading: 700;

  --line-body: 1.5; /* interligne corps, cadrage §1 bis */
  --line-title: 1.25; /* interligne titres */

  --tracking-caps: 0.08em; /* etiquettes/eyebrows uniquement (revise de 0,12em) */

  /* -- trame -- */
  --space-mobile: 32px;
  --space-desktop: 96px;
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;

  --rule-width: 1px;
  /* Arrondi. Le cadrage §1 disait « 2 px max » — un parti pris assume, tire de
     la page du Trianon, très anguleuse. Mehdi a demandé le 08/09 « un peu plus
     marqué, pas beaucoup, un peu plus ovale » : on passe à 6 px. L'écart au
     cadrage est délibéré et lui appartient — la sobriété tient ici à l'espace,
     aux filets fins et à la couleur, pas à l'angle vif.
     Les vignettes carrées gardent un arrondi plus discret (--radius-vignette) :
     sur 52 px, 6 px ferait pastille. */
  --radius: 6px;
  --radius-vignette: 4px;

  --tap-min: 48px; /* cible tactile minimale (relevee de 44 a 48, cadrage §1 bis) */
  --tap-gap: 8px; /* ecart minimal entre deux cibles tactiles */
  --control-height: 52px; /* boutons et champs de saisie, cadrage §1 bis */
}

/* Bureau (>= 1024px, meme palier que le reste du systeme, cf. components.css) :
   corps 17px, titre de page 34px -- cf. table du cadrage §1 bis. */
@media (min-width: 1024px) {
  :root {
    --size-body: 17px;
    --size-page-title: 34px;
  }
}

/* -- sombre : preference systeme, tant que rien n'est memorise explicitement -- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14161A;
    --surface: #1D2026;
    --surface-raised: #23262D;
    --ink: #ECE9E3;
    --muted: #A8A59D; /* 07/09 : 7,4:1 sur --bg-sombre, 6,6:1 sur --surface-sombre (etait 6,3:1) */
    --rule: #33363D;
    --primary: #9DB4D8;
    --primary-ink: #14161A;
    --accent: #9FC0A6;
    --warn: #D2A75A;
    --accent-ink: #9FC0A6; /* deja conforme en sombre, alias identique */
    --warn-ink: #D2A75A; /* deja conforme en sombre, alias identique */
    --alert: #C97060;
    --alert-ink: #14161A;
    --overlay: rgba(0, 0, 0, 0.6);

    --accent-faint: #202822;
    --warn-faint: #2A2318;
    --alert-faint: #2C1D1A;
    --muted-faint: #24262B;
  }
}

/* -- sombre : choix explicite memorise (bascule de theme), gagne toujours -- */
:root[data-theme='dark'] {
  --bg: #14161A;
  --surface: #1D2026;
  --surface-raised: #23262D;
  --ink: #ECE9E3;
  --muted: #A8A59D; /* 07/09 : 7,4:1 sur --bg-sombre, 6,6:1 sur --surface-sombre (etait 6,3:1) */
  --rule: #33363D;
  --primary: #9DB4D8;
  --primary-ink: #14161A;
  --accent: #9FC0A6;
  --warn: #D2A75A;
  --accent-ink: #9FC0A6; /* deja conforme en sombre, alias identique */
  --warn-ink: #D2A75A; /* deja conforme en sombre, alias identique */
  --alert: #C97060;
  --alert-ink: #14161A;
  --overlay: rgba(0, 0, 0, 0.6);

  --accent-faint: #202822;
  --warn-faint: #2A2318;
  --alert-faint: #2C1D1A;
  --muted-faint: #24262B;
}