/*
  SEYVO DESIGN SYSTEM — Phase 48H
  Couche composants globale sans redéfinition des primitives.
  Règle: tokens = seyvo-tokens.css, resets/bootstrap = seyvo-base.css, shell = app-shell.css.
*/

.seyvo-shell,
.seyvo-admin-shell {
  font-family: var(--seyvo-font);
}

.sv-surface {
  background: var(--seyvo-white);
  border: 1px solid var(--seyvo-border);
  border-radius: var(--seyvo-radius-md);
  box-shadow: var(--seyvo-shadow-xs);
}

.sv-surface-soft {
  background: var(--seyvo-soft);
  border: 1px solid var(--seyvo-border);
  border-radius: var(--seyvo-radius-md);
}

.sv-link-primary { color: var(--sv-primary); }
.sv-link-primary:hover { color: var(--sv-primary-hover); }

.sv-focus-ring:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--seyvo-primary-rgb),.14);
}

.sv-muted { color: var(--seyvo-muted); }
.sv-text { color: var(--seyvo-text); }
.sv-ink { color: var(--seyvo-ink); }

/*
  PATTERN ICÔNE-MODULE UNIFIÉ — Fix moyen phase 48O
  Un seul pattern pour toutes les icônes de modules dans l'app :
  carré arrondi (border-radius: 18px) + fond soft du token module + icône colorée.
  À utiliser à la place des cercles pleins (admin-dashboard) et des carrés (dashboard).
*/
.sv-module-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  flex-shrink: 0;
}

.sv-module-icon-wrap.size-sm { width: 40px; height: 40px; font-size: 16px; border-radius: 14px; }
.sv-module-icon-wrap.size-md { width: 50px; height: 50px; font-size: 18px; border-radius: 18px; }
.sv-module-icon-wrap.size-lg { width: 60px; height: 60px; font-size: 22px; border-radius: 20px; }

.sv-module-icon-wrap.tone-coral  { background: var(--seyvo-accent-warm-soft, rgba(232,109,79,.13));  color: var(--seyvo-accent-warm-dark, #C85037); }
.sv-module-icon-wrap.tone-sky    { background: var(--seyvo-accent-sky-soft,  rgba(47,128,237,.12));  color: var(--seyvo-accent-sky-dark,  #1B64C9); }
.sv-module-icon-wrap.tone-jade   { background: var(--seyvo-success-soft,     rgba(22,169,108,.12));  color: var(--seyvo-primary-600,      #0D7A4D); }
.sv-module-icon-wrap.tone-gold   { background: var(--seyvo-accent-gold-soft, rgba(232,168,51,.14));  color: var(--seyvo-accent-gold-dark, #B97812); }
.sv-module-icon-wrap.tone-violet { background: var(--seyvo-accent-violet-soft,rgba(124,92,219,.12)); color: var(--seyvo-accent-violet-dark,#6243BE); }
.sv-module-icon-wrap.tone-ink    { background: rgba(14,26,18,.07);                                   color: var(--seyvo-ink, #0E1A12); }