/* ============================================================================
 * PEAU VITRINE DU BACK-OFFICE — apps/admin/vitrine-skin.css
 * ============================================================================
 * Chargée par le SEUL dashboard, APRÈS tokens.css, pour aligner le back-office
 * sur la direction artistique du site hidemydrop.com (2026-08-31) : Syne au
 * titrage, l'action au bleu #306BFF du kit, survol noir (décision vitrine),
 * fonds #F9FAFB / blanc, monde arrondi, ombre douce.
 *
 * POURQUOI UNE PEAU ET PAS UNE ÉDITION DE tokens.css : la page de suivi
 * acheteur (apps/tracking-page) et la landing tirent le même tokens.css. Leur
 * monde reste la Réglette — c'est celui que les gabarits marchands habillent
 * et celui que les visuels de la vitrine montrent. Éditer le socle aurait
 * rethémé la surface acheteur sans qu'on le demande.
 *
 * La palette vient du kit Elementor de la vitrine (post 7, relevé le 31/08) :
 * Primary #306BFF, encre #111827, corps #6B7280, Light Neutral #F9FAFB,
 * Dark Blue #18202F. Typo du kit : Syne, toutes graisses.
 * Contrastes vérifiés au détecteur : blanc sur #2B62F2 5.08:1, #111827 sur #F9FAFB 16.2:1.
 * ========================================================================== */

:root:not([data-theme="dark"]),
[data-theme="light"] {
  /* Fonds : la page prend le Light Neutral, ce qui flotte et la carte le blanc.
   * `:root:not(...)` et pas `:root` nu : à spécificité égale, cette feuille
   * chargée en dernier écraserait le bloc sombre du socle. */
  --surface:      oklch(100% 0 0);              /* #FFFFFF */
  --ground:       oklch(98.4% 0.002 255);       /* #F9FAFB */
  --ground-sunk:  oklch(96.2% 0.004 255);       /* #F1F3F6 */
  --ground-deep:  oklch(93%   0.005 255);       /* #E7EAEE */

  /* Encre : celle de la vitrine */
  --ink:          oklch(20.5% 0.022 264);       /* #111827  16.9:1 */

  /* L'action : le bleu du kit, assombri d'un cran. Le Primary vitrine
   * (#306BFF) rend 4.49:1 sous du blanc : bon pour ses boutons en texte
   * large, sous le plancher AA pour les libellés denses d'un back-office.
   * #2B62F2 est le même bleu un demi-ton plus bas : blanc dessus 5.08:1. */
  --plaque:        #2B62F2;
  --plaque-hover:  oklch(20.5% 0.022 264);      /* #111827  le survol noir de la vitrine */
  --plaque-active: oklch(24.5% 0.031 262);      /* #18202F  le Dark Blue du kit */

  /* Les surfaces navigateur suivent le bleu */
  --state-focus-halo: oklch(53% 0.20 262.7 / 0.32);
  --selection-bg:     oklch(53% 0.20 262.7 / 0.18);
  --focus-stroke:     var(--plaque);

  /* L'ombre de carte : la signature douce de la vitrine, dosée registre */
  --shadow-card: 0 6px 24px oklch(20.5% 0.022 264 / 0.06),
                 0 1px 2px  oklch(20.5% 0.022 264 / 0.05);
}

[data-theme="dark"] {
  /* Le sombre est COMPOSÉ, pas inversé : mêmes fonds Réglette, action bleue.
   * La plaque sombre n'est plus claire : le texte posé dessus redevient blanc. */
  --plaque:        #2B62F2;                     /* blanc dessus 5.08:1 */
  --plaque-hover:  oklch(47%   0.175 262.7);    /* le survol s'enfonce, blanc dessus 6.4:1 */
  --plaque-active: oklch(40%   0.150 262.7);
  --ink-inverse:   oklch(97%   0.003 255);      /* #F4F5F7 */

  --state-focus-halo: oklch(68% 0.15 262.7 / 0.40);
  --selection-bg:     oklch(60% 0.17 262.7 / 0.35);
  --focus-stroke:     var(--plaque);

  --shadow-card: 0 6px 24px oklch(2% 0.004 255 / 0.50),
                 0 1px 2px  oklch(2% 0.004 255 / 0.35);
}

:root {
  /* Syne porte le titrage ; le texte courant et les données restent en Archivo */
  --font-display: "Syne", "Archivo Expanded", "Repli Display", Arial, sans-serif;

  /* Le monde arrondi de la vitrine */
  --radius-mark:    4px;
  --radius-control: 8px;
  --radius-float:   12px;
  --radius-card:    14px;                       /* la carte : 12-16px, jamais plus */
}

/* Les alias de surface levée suivent le blanc de la carte */
:root:not([data-theme="dark"]),
[data-theme="light"] {
  --surface-raised:  oklch(100% 0 0);
  --surface-overlay: oklch(100% 0 0);
}

/* Le curseur de saisie porte le bleu de la marque (tokens.css §8 pose l'encre) */
input, textarea, [contenteditable] { caret-color: var(--plaque); }