/* ============================================================
   DESIGN SYSTEM — Painel de Gestão Inteligente PME
   Rwany Mores | rwany.com.br
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ── VARIÁVEIS ──────────────────────────────────────────────── */
:root {
  --primary-900: #0F1E38;
  --primary-700: #1B2B4B;
  --primary-500: #2D4A7A;
  --primary-300: #5A7BAE;
  --primary-100: #EBF0F8;

  --accent-600: #C8891F;
  --accent-500: #E8A02E;
  --accent-300: #F4C46A;
  --accent-100: #FDF3E0;

  /* Semáforo */
  --verde:       #16A34A;
  --verde-bg:    #DCFCE7;
  --amarelo:     #CA8A04;
  --amarelo-bg:  #FEF9C3;
  --vermelho:    #DC2626;
  --vermelho-bg: #FEE2E2;

  --surface:        #F4F6FA;
  --card:           #FFFFFF;
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-sm:       0 1px 3px rgba(15,30,56,0.06), 0 1px 2px rgba(15,30,56,0.04);
  --shadow-card:     0 1px 3px rgba(15,30,56,0.06), 0 4px 16px rgba(15,30,56,0.08);
  --shadow-elevated: 0 8px 32px rgba(15,30,56,0.12);
  --shadow-modal:    0 20px 60px rgba(15,30,56,0.22);

  --transition:      200ms ease-out;
  --transition-slow: 350ms ease-out;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body  { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--text-primary); background: var(--surface); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button   { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── TIPOGRAFIA ─────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.25; }
h4, h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: 1.35; }

.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-center   { text-align: center; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container      { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 20px; }
.container-wide { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.flex           { display: flex; }
.items-center   { align-items: center; }
.justify-between{ justify-content: space-between; }
.gap-4          { gap: 16px; }
.w-full         { width: 100%; }

/* ── CARDS ──────────────────────────────────────────────────── */
.card    { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px; }
.card-sm { padding: 18px; border-radius: var(--radius-md); }

/* ── BOTÕES ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius-md);
  font-size: 0.95rem; font-weight: 600; font-family: var(--font-body);
  transition: all var(--transition); white-space: nowrap; min-height: 46px;
}
.btn-primary  { background: var(--accent-500); color: var(--primary-900); }
.btn-primary:hover { background: var(--accent-600); box-shadow: 0 4px 16px rgba(232,160,46,0.35); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary { background: var(--primary-100); color: var(--primary-700); }
.btn-secondary:hover { background: var(--primary-500); color: #fff; }

.btn-outline { border: 2px solid var(--border-strong); color: var(--text-secondary); background: transparent; }
.btn-outline:hover { border-color: var(--primary-500); color: var(--primary-500); }

.btn-ghost  { color: var(--text-secondary); padding: 9px 14px; }
.btn-ghost:hover { background: var(--primary-100); color: var(--primary-700); }

.btn-lg  { padding: 17px 34px; font-size: 1.05rem; }
.btn-sm  { padding: 9px 18px; font-size: 0.875rem; min-height: 38px; }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── FORMULÁRIOS ────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
.form-control {
  width: 100%; padding: 11px 14px;
  border: 2px solid var(--border); border-radius: var(--radius-md);
  font-size: 0.95rem; font-family: var(--font-body);
  color: var(--text-primary); background: var(--card);
  transition: border-color var(--transition); outline: none; min-height: 46px;
}
.form-control:focus { border-color: var(--primary-500); }
.form-control::placeholder { color: var(--text-muted); }

/* ── ALERTAS ────────────────────────────────────────────────── */
.alert { padding: 13px 16px; border-radius: var(--radius-md); font-size: 0.875rem; display: flex; align-items: flex-start; gap: 8px; }
.alert-error   { background: #FEE2E2; color: #991B1B; border-left: 4px solid #DC2626; }
.alert-success { background: #DCFCE7; color: #166534; border-left: 4px solid #16A34A; }
.alert-info    { background: var(--primary-100); color: var(--primary-700); border-left: 4px solid var(--primary-500); }

/* ── SPINNER ────────────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.spinner-dark { border-color: rgba(15,30,56,0.15); border-top-color: var(--primary-700); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── UTILITÁRIOS ────────────────────────────────────────────── */
.hidden   { display: none !important; }
.sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mb-4  { margin-bottom: 16px; }
.rounded-full { border-radius: 999px; }

/* ── ANIMAÇÕES ──────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 350ms ease-out both; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-fade { animation: fadeIn 250ms ease-out both; }

/* ── RESPONSIVO ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .card { padding: 20px; }
  .btn-lg { padding: 15px 22px; font-size: 1rem; }
}