/* ═══════════════════════════════════════════════════════════════════════
   FORJE — UI KIT PASS (test DA 21st.dev / Interfaces DS)
   Couche de discipline chargée EN DERNIER, par-dessus app*.css.
   Langage : rectangles arrondis 10px, hairlines, ombres calmes à 2 couches,
   badges teintés doux, focus rings uniformes. DM Sans intouchable.
   ROLLBACK : retirer le <link> app-ui-kit.css (index.html + Forje App.html).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Échelle d'ombres — shadcn-like, jamais dramatique */
  --ui-shadow-xs: 0 1px 2px rgba(17, 24, 50, 0.05);
  --ui-shadow-sm: 0 1px 2px rgba(17, 24, 50, 0.05), 0 2px 8px -2px rgba(17, 24, 50, 0.07);
  --ui-shadow-md: 0 2px 4px rgba(17, 24, 50, 0.05), 0 8px 24px -8px rgba(17, 24, 50, 0.12);
  /* Ring de focus unique pour toute l'app */
  --ui-ring: rgba(79, 91, 213, 0.22);
  --ui-ring-border: rgba(79, 91, 213, 0.55);
  /* Radius discipliné */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}

/* ─── Boutons — rectangle arrondi, matière calme ─────────────────────────
   Fini la pilule 999px : radius 10px comme Linear/Interfaces.
   On garde la matière (surface + hairline + highlight interne + ombre
   teintée) mais sans lévitation ni balayage lumineux. */
.btn {
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: -0.006em;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .18s ease, transform .1s ease;
}
.btn-icon { border-radius: 8px; }
.btn-sm   { border-radius: 8px; }

/* Le balayage lumineux fait gadget — supprimé partout */
.btn-primary::before,
.btn-accent::before { display: none; }

.btn-primary {
  background: var(--app-accent);
  border-color: #3D48B8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(17, 24, 50, 0.10),
    0 2px 6px -1px rgba(79, 91, 213, 0.35);
}
.btn-primary:hover {
  transform: none;
  background: #4752C6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(17, 24, 50, 0.10),
    0 2px 8px -1px rgba(79, 91, 213, 0.40);
}
.btn-primary:active {
  background: #414BB8;
  box-shadow: inset 0 1px 2px rgba(10, 14, 60, 0.22);
}

.btn-ghost {
  background: var(--app-surface);
  border-color: var(--app-line-2);
  box-shadow: var(--ui-shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-ghost:hover {
  transform: none;
  background: var(--app-surface-2);
  border-color: var(--app-line-3);
  color: var(--app-fg);
  box-shadow: var(--ui-shadow-xs);
}

.btn-accent {
  background: rgba(79, 91, 213, 0.08);
  border-color: transparent;
  box-shadow: none;
}
.btn-accent:hover {
  transform: none;
  background: rgba(79, 91, 213, 0.13);
  border-color: transparent;
  box-shadow: none;
}

.btn-danger {
  background: var(--app-surface);
  border-color: rgba(196, 61, 61, 0.25);
  box-shadow: var(--ui-shadow-xs);
}
.btn-danger:hover {
  transform: none;
  background: rgba(196, 61, 61, 0.05);
  box-shadow: var(--ui-shadow-xs);
}

.btn:active { transform: translateY(0.5px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--ui-ring-border);
}

/* ─── Cards & tuiles — hairline + ombre discrète, hover neutre ─────────── */
.card,
.bento-tile {
  border-radius: var(--radius-lg);
  border-color: var(--app-line-2);
  box-shadow: var(--ui-shadow-xs);
}
.bento-tile { padding: 20px 22px; }
.bento-tile:hover {
  border-color: var(--app-line-3);
  box-shadow: var(--ui-shadow-sm);
  transform: none;
}

/* ─── Champs de saisie — un seul langage de focus ────────────────────────
   Fond blanc, hairline, focus = bordure accent + halo 3px à 15%. */
.brand-input, .brand-textarea, .settings-input,
.dd-edit-search input, .brand-forge__input {
  background: var(--app-surface);
  border: 1px solid var(--app-line-2);
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.brand-input:focus, .brand-textarea:focus, .settings-input:focus,
.dd-edit-search input:focus, .brand-forge__input:focus {
  outline: none;
  border-color: var(--ui-ring-border);
  box-shadow: 0 0 0 3px var(--ui-ring);
}
.brand-input::placeholder, .brand-textarea::placeholder,
.settings-input::placeholder { color: var(--app-fg-4); }

/* ─── Badges & tags — pilules teintées douces (façon stat-cards 21st) ──── */
.tag {
  border-radius: 6px;
  border-color: transparent;
  background: var(--app-surface-3);
}
.tag-success { background: rgba(31, 157, 106, 0.10); color: #177A52; }
.tag-warn    { background: rgba(212, 148, 42, 0.12); color: #A26F1B; }
.tag-danger  { background: rgba(209, 69, 69, 0.10);  color: #B23A3A; }
.tag-accent  { background: rgba(14, 165, 198, 0.10); color: #0B7E97; }

.brand-chip { border-radius: 8px; }

/* ─── Bannière breaking — l'urgence sans le sapin de Noël ────────────────
   On garde le point qui pulse (lié aux données) ; on retire le lavis rose
   plein cadre au profit d'un liseré et d'une teinte à peine posée. */
.breaking-bar {
  background: var(--app-surface);
  border: 1px solid rgba(209, 69, 69, 0.22);
  border-left: 3px solid #D14545;
  border-radius: var(--radius-lg);
  box-shadow: var(--ui-shadow-xs);
}
.breaking-pulse-layer { opacity: 0.35; }

/* ─── Scrollbar plus fine ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { border-width: 2px; }