/* ============================================================
   CutBG — Design Tokens (source unique de verite)
   Police : Space Grotesk (titres) / DM Sans (texte)
   Remplace TOUTES les valeurs divergentes du studio.

   Mesures de reference (audit 3 agents, 02/10/2026) :
     - 153 couleurs hex distinctes reparties sur 6 fichiers
     - 413 declarations de couleur (hex + rgb/rgba)
     - 0 variable CSS sur la page
     - la couleur approuvee --cutbg-accent (#3579ff) n'apparait
       que 3 fois, noyee parmi des neutres non approuves
   Ces tokens sont la seule source autorisee. Toute valeur
   divergente ailleurs dans le code est un bug a corriger.
   ============================================================ */

:root {
  /* ---- 1. SURFACES (theme sombre, conforme client) ---- */
  --cutbg-bg:          rgba(18, 20, 29, 0.94);  /* Fond principal approuve */
  --cutbg-bg-solid:    #12141d;                  /* base opaque, pour body */
  --cutbg-surface-1:   rgba(255, 255, 255, 0.035);
  --cutbg-surface-2:   rgba(255, 255, 255, 0.06);
  --cutbg-surface-3:   rgba(255, 255, 255, 0.09);
  --cutbg-elevated:    rgba(24, 27, 38, 0.92);

  /* ---- 2. BORDURES ---- */
  --cutbg-border:      rgba(255, 255, 255, 0.10);
  --cutbg-border-sub:  rgba(255, 255, 255, 0.06);
  --cutbg-border-foc:  rgba(53, 121, 255, 0.45);

  /* ---- 3. TEXTE ---- */
  --cutbg-text:        #eef1f7;
  --cutbg-text-2:      rgba(238, 241, 247, 0.72);
  --cutbg-text-3:      rgba(238, 241, 247, 0.48);
  --cutbg-text-invert: #ffffff;

  /* ---- 4. ACCENT (approuve client : bleu / cyan / violet sobre) ---- */
  --cutbg-accent:      #3579ff;
  --cutbg-accent-2:    #6b52ff;
  --cutbg-cta:         linear-gradient(135deg, #3579ff 0%, #6b52ff 100%);
  --cutbg-accent-soft: rgba(53, 121, 255, 0.14);
  --cutbg-accent-line: rgba(53, 121, 255, 0.34);
  --cutbg-focus:       #7ea6ff;

  /* ---- 5. ETATS (semantiques, sobres — pas de rose ni d ambre) ---- */
  --cutbg-ok:          #34d399;
  --cutbg-ok-soft:     rgba(52, 211, 153, 0.14);
  --cutbg-warn:        #fbbf24;
  --cutbg-warn-soft:   rgba(251, 191, 36, 0.14);
  --cutbg-err:         #f87171;
  --cutbg-err-soft:    rgba(248, 113, 113, 0.14);

  /* ---- 6. GEOMETRIE ---- */
  --cutbg-radius:      14px;   /* approuve client */
  --cutbg-radius-sm:   9px;
  --cutbg-radius-lg:   20px;
  --cutbg-radius-pill: 999px;

  /* ---- 7. OMBRES ---- */
  --cutbg-shadow-1:    0 1px 2px rgba(0, 0, 0, 0.30);
  --cutbg-shadow-2:    0 8px 28px rgba(0, 0, 0, 0.38);
  --cutbg-shadow-3:    0 20px 56px rgba(0, 0, 0, 0.48);
  --cutbg-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --cutbg-glow:        0 0 0 1px var(--cutbg-accent-line), 0 6px 22px rgba(53, 121, 255, 0.22);

  /* ---- 8. GLASS ---- */
  --cutbg-blur:        saturate(140%) blur(18px);
  --cutbg-glass-bg:    var(--cutbg-bg);
  --cutbg-glass-brd:   var(--cutbg-border);

  /* ---- 9. TYPOGRAPHIE ---- */
  --cutbg-font-head:   'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cutbg-font-body:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cutbg-font-mono:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --cutbg-fs-xs:       11px;
  --cutbg-fs-sm:       12px;
  --cutbg-fs-md:       13px;
  --cutbg-fs-base:     14px;
  --cutbg-fs-lg:       16px;
  --cutbg-fs-xl:       20px;
  --cutbg-fs-2xl:      26px;
  --cutbg-lh-tight:    1.25;
  --cutbg-lh:          1.55;

  /* ---- 10. ESPACEMENT (echelle 4px) ---- */
  --cutbg-s1:  4px;
  --cutbg-s2:  8px;
  --cutbg-s3:  12px;
  --cutbg-s4:  16px;
  --cutbg-s5:  20px;
  --cutbg-s6:  24px;
  --cutbg-s8:  32px;

  /* ---- 11. MOUVEMENT ---- */
  --cutbg-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --cutbg-dur-1:  120ms;
  --cutbg-dur-2:  220ms;
  --cutbg-z-dock:900;     /* colonne de docking, sous les panneaux qu elle empile */
  --cutbg-z-panel:1000;   /* panneaux flottants unifies */
  --cutbg-z-toast:3000;
  --cutbg-z-modal:4000;   /* plafond absolu : jamais plus de 4000 */
}

/* ============================================================
   NORMALISATION — applique la palette aux surfaces reelles.
   Cette couche est volontairement presente ET specifique :
   meme si une valeur divergente survit dans un <style> injecte
   par la boucle autonome, ces regles la corrigent.
   ============================================================ */

.panel,
.glass-studio,
.bg-selector-card,
.export-card,
.upload-stage,
.brush-card,
.variant-card,
#bg-panel,
#cutbg-rim-panel,
#cutbg-relight-panel,
#cutbg-reflection-panel,
#cutbg-bokeh-dof-panel,
#cutbg-style-library,
#cutbg-layers-panel,
#cutbg-versions-panel,
#cutbg-liquify-panel,
#cutbg-comps-panel,
.cbg-refl-panel,
.cutbg-studio-panel {
  border-radius: var(--cutbg-radius);
  background: var(--cutbg-bg);
  border: 1px solid var(--cutbg-border);
  box-shadow: var(--cutbg-shadow-2), var(--cutbg-shadow-inset);
  color: var(--cutbg-text);
  font-family: var(--cutbg-font-body);
}

/* Boutons : un seul gradient, un seul rayon */
.btn,
.btn-acc,
.btn-primary,
button.primary,
.upload-button,
#upload-button {
  background: var(--cutbg-cta);
  border: 1px solid transparent;
  border-radius: var(--cutbg-radius-sm);
  color: var(--cutbg-text-invert);
  font-family: var(--cutbg-font-body);
  font-weight: 600;
  transition: filter var(--cutbg-dur-1) var(--cutbg-ease);
}
.btn:hover,
.btn-acc:hover,
#upload-button:hover { filter: brightness(1.08); }

/* Focus visible partout — accessibilite clavier */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cutbg-focus);
  outline-offset: 2px;
  border-radius: var(--cutbg-radius-sm);
}

/* Titres */
h1, h2, h3, .studio-intro h1, .brush-title-group, .bg-selector-title {
  font-family: var(--cutbg-font-head);
  color: var(--cutbg-text);
  line-height: var(--cutbg-lh-tight);
}

/* Champs */
:where(input[type='text'], input[type='number'], input[type='search'], select, textarea) {
  background: var(--cutbg-surface-1);
  border: 1px solid var(--cutbg-border);
  border-radius: var(--cutbg-radius-sm);
  color: var(--cutbg-text);
  font-family: var(--cutbg-font-body);
  font-size: var(--cutbg-fs-base);
}
:where(input, select, textarea)::placeholder { color: var(--cutbg-text-3); }

/* Plafond z-index : aucun element ne peut depasser 4000 */
.panel, .toast, .modal, [role='dialog'] { z-index: var(--cutbg-z-panel); }
/* ---- PLAFOND Z-INDEX (verrou final) ----
   Audit 02/10 : le HTML inline contenait jusqu'a z-index 2147483000
   (limite d'un entier 32 bits signe). Ces valeurs rendent la hierarchie
   de couches illisible et provoquent le chevauchement des panneaux.
   Regle : toute surface flottante est bornee a une couche lisible,
   les modales au plafond 4000. */
.studio-page :where(.panel, .toast, .modal, [role='dialog'], .overlay, .drawer, .sheet) {
  z-index: var(--cutbg-z-panel) !important;
}
/* La colonne de docking passe SOUS les panneaux qu elle empile : sinon
   les panneaux masquent leur propre conteneur et l' ordre visuel depend
   du DOM au lieu de l' architecture. */
#cutbg-dock, #cutbg-dock * { z-index: var(--cutbg-z-dock) !important; }
.studio-page :where(.toast, .snackbar, .notification) { z-index: var(--cutbg-z-toast) !important; }
.studio-page :where(.modal, [role='dialog'], .dialog-backdrop, .lightbox) {
  z-index: var(--cutbg-z-modal) !important;
}


/* ============================================================
   FOND DE PAGE ET TEXTE
   MESURE (navigateur, 02/10/2026) :
     - html et body resolvaient a rgba(0,0,0,0) : aucune regle ne leur
       posait de fond. Le site laissait donc voir le degrade clair du
       navigateur par defaut, avec un titre blanc dessus (contraste nul).
     - un fond clair residuel (#dfeaf0) venait de studio-astra.css, retire.
   Le fond de la page est desormais declare ICI, et nulle part ailleurs :
   c est le seul endroit autorise.
   ============================================================ */
html, body {
  background: var(--cutbg-bg);
  background-color: var(--cutbg-bg);
  color: var(--cutbg-text);
  min-height: 100%;
}
body {
  font-family: var(--cutbg-font-body);
  font-size: var(--cutbg-fs-base);
  line-height: var(--cutbg-lh);
  -webkit-font-smoothing: antialiased;
}
/* Le hero herait de la couleur de texte Claire : sur fond sombre elle est
   lisible. Avant le fond sombre, ce texte blanc etait pose sur un fond clair. */
.studio-page h1,
.studio-page h2,
h1, h2 {
  color: var(--cutbg-text);
}