/* Marketing StarNails — Design System 6.1
   Base compartilhada para todas as telas. As classes atuais permanecem
   compatíveis; novos módulos devem preferir os componentes st-* abaixo. */
:root {
  --st-color-brand-700: #765313;
  --st-color-brand-600: #8d651d;
  --st-color-brand-500: #b8892d;
  --st-color-brand-300: #dfc37f;
  --st-color-brand-100: #f7efd9;
  --st-color-brand-050: #fffaf0;
  --st-color-bg: #f4f5f7;
  --st-color-surface: #ffffff;
  --st-color-text: #24282f;
  --st-color-muted: #717780;
  --st-color-border: #e8dfcf;
  --st-color-success: #2f7a50;
  --st-color-warning: #a56b00;
  --st-color-danger: #ae4242;
  --st-color-info: #356a9a;

  --st-space-1: 4px;
  --st-space-2: 8px;
  --st-space-3: 12px;
  --st-space-4: 16px;
  --st-space-5: 20px;
  --st-space-6: 24px;
  --st-space-8: 32px;
  --st-space-10: 40px;

  --st-radius-sm: 8px;
  --st-radius-md: 10px;
  --st-radius-lg: 14px;
  --st-radius-xl: 18px;
  --st-radius-pill: 999px;

  --st-shadow-sm: 0 3px 14px rgba(25, 28, 33, .04);
  --st-shadow-md: 0 8px 24px rgba(93, 66, 18, .06);
  --st-shadow-lg: 0 14px 36px rgba(45, 38, 25, .10);

  --st-control-height-sm: 34px;
  --st-control-height-md: 40px;
  --st-control-height-lg: 46px;
  --st-content-max: 1600px;
}

/* Compatibilidade visual global: dimensões previsíveis sem reestruturar telas. */
button, .button, input, select, textarea { outline: none; }
button:focus-visible, .button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(184, 137, 45, .20);
  border-color: var(--st-color-brand-500) !important;
}
button, .button { min-height: var(--st-control-height-md); }
input, select { min-height: var(--st-control-height-md); }
textarea { line-height: 1.5; }
.card, .panel, .hero, .modal { isolation: isolate; }

/* Cabeçalhos reutilizáveis */
.st-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--st-space-4);
  margin-bottom: var(--st-space-4);
}
.st-page-header__title { margin: 0; font-size: 28px; line-height: 1.15; }
.st-page-header__subtitle { margin: var(--st-space-2) 0 0; color: var(--st-color-muted); }
.st-page-header__actions { display: flex; gap: var(--st-space-2); flex-wrap: wrap; }

/* Superfícies */
.st-surface {
  background: var(--st-color-surface);
  border: 1px solid var(--st-color-border);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-md);
}
.st-card { padding: var(--st-space-4); }
.st-panel { padding: var(--st-space-5); }

/* Grids */
.st-grid { display: grid; gap: var(--st-space-4); }
.st-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Controles */
.st-field { display: grid; gap: 6px; }
.st-field__label { font-size: 12px; font-weight: 750; color: #655c4d; }
.st-control {
  width: 100%;
  min-height: var(--st-control-height-md);
  border: 1px solid #dcd6ca;
  border-radius: var(--st-radius-md);
  padding: 9px 11px;
  background: #fff;
  color: var(--st-color-text);
}
.st-control::placeholder { color: #9a9ea5; }
.st-control:disabled { background: #f3f4f6; color: #8b9097; cursor: not-allowed; }

/* Botões */
.st-button {
  min-height: var(--st-control-height-md);
  border: 0;
  border-radius: var(--st-radius-md);
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 750;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s, filter .18s, box-shadow .18s;
}
.st-button:hover { transform: translateY(-1px); }
.st-button--primary { background: var(--st-color-brand-500); color: #fff; }
.st-button--secondary { background: #fff; color: #5f5136; border: 1px solid #dcd2bf; }
.st-button--danger { background: var(--st-color-danger); color: #fff; }
.st-button--ghost { background: transparent; color: var(--st-color-brand-700); }
.st-button--sm { min-height: var(--st-control-height-sm); padding: 6px 10px; font-size: 12px; }
.st-button--lg { min-height: var(--st-control-height-lg); padding: 11px 18px; }

/* Badges e chips */
.st-badge, .st-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--st-radius-pill);
  white-space: nowrap;
}
.st-badge { padding: 5px 9px; font-size: 11px; font-weight: 800; }
.st-chip { padding: 4px 8px; font-size: 11px; border: 1px solid #ead8ad; background: #fff7e5; color: #7a5a1e; }
.st-badge--success { background: #e7f5ed; color: var(--st-color-success); }
.st-badge--warning { background: #fff1d4; color: var(--st-color-warning); }
.st-badge--danger { background: #fde9e9; color: var(--st-color-danger); }
.st-badge--info { background: #eaf3fb; color: var(--st-color-info); }

/* KPIs */
.st-kpi { padding: var(--st-space-4); }
.st-kpi__label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #8b7a58; font-weight: 750; }
.st-kpi__value { margin-top: 7px; font-size: 24px; line-height: 1.1; font-weight: 850; }
.st-kpi__hint { margin-top: 6px; font-size: 12px; color: var(--st-color-muted); }

/* Tabelas */
.st-table-wrap { overflow: auto; border: 1px solid #eee7d9; border-radius: var(--st-radius-md); background: #fff; }
.st-table { width: 100%; border-collapse: collapse; }
.st-table th { background: #faf8f4; color: #675f52; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.st-table th, .st-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid #eee7d9; font-size: 13px; }
.st-table tbody tr:hover { background: #fffdf8; }

/* Estados vazios e alertas */
.st-empty { padding: var(--st-space-8); text-align: center; color: var(--st-color-muted); }
.st-alert { padding: 12px 14px; border-radius: var(--st-radius-md); border: 1px solid transparent; }
.st-alert--success { background: #e7f5ed; border-color: #c8e8d6; color: #245e3e; }
.st-alert--warning { background: #fff1d4; border-color: #ecd39e; color: #805400; }
.st-alert--danger { background: #fde9e9; border-color: #efcaca; color: #8e3434; }
.st-alert--info { background: #eaf3fb; border-color: #c9dfef; color: #2e628e; }

@media (max-width: 1050px) {
  .st-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .st-page-header { flex-direction: column; }
  .st-grid--2, .st-grid--3, .st-grid--4 { grid-template-columns: 1fr; }
  .st-page-header__actions { width: 100%; }
}