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

/* ─── SIC Design Tokens ─── */
:root {
  --font-sans: 'Inter', system-ui, sans-serif;

  /* Paleta base */
  --navy-900:   #0F172A;
  --navy-800:   #1E293B;
  --navy-700:   #1E3A5F;
  --indigo-500: #4F46E5;
  --indigo-400: #6366F1;
  --indigo-300: #818CF8;
  --slate-600:  #475569;
  --slate-400:  #94A3B8;
  --slate-200:  #E2E8F0;
  --slate-100:  #F1F5F9;
  --slate-50:   #F8FAFC;

  /* Status suavizados */
  --success:        #16A34A;
  --success-bg:     #DCFCE7;
  --success-text:   #14532D;
  --warning:        #D97706;
  --warning-bg:     #FEF3C7;
  --warning-text:   #78350F;
  --error:          #DC2626;
  --error-bg:       #FEE2E2;
  --error-text:     #7F1D1D;
  --info:           #0284C7;
  --info-bg:        #E0F2FE;
  --info-text:      #0C4A6E;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);

  /* Transições */
  --transition: 150ms ease;
  --transition-md: 200ms ease;
}

/* ─── PDV Theme (light only) ─── */
.theme-pdv {
  --bg:            var(--slate-50);
  --surface:       #FFFFFF;
  --surface-raised: var(--slate-100);
  --border:        var(--slate-200);
  --primary:       var(--indigo-500);
  --primary-hover: #4338CA;
  --primary-text:  #FFFFFF;
  --header-bg:     var(--navy-700);
  --header-text:   #FFFFFF;
  --text:          var(--navy-900);
  --text-secondary: var(--slate-600);
  --text-muted:    var(--slate-400);
}

/* ─── Dashboard Theme (light) ─── */
.theme-dashboard {
  --bg:            var(--slate-50);
  --surface:       #FFFFFF;
  --surface-raised: var(--slate-100);
  --border:        var(--slate-200);
  --primary:       var(--navy-700);
  --primary-hover: #1D4ED8;
  --primary-text:  #FFFFFF;
  --accent:        var(--indigo-500);
  --header-bg:     var(--navy-800);
  --header-text:   #FFFFFF;
  --sidebar-bg:    var(--navy-800);
  --sidebar-text:  var(--slate-50);
  --sidebar-active: var(--indigo-500);
  --text:          var(--navy-900);
  --text-secondary: var(--slate-600);
  --text-muted:    var(--slate-400);
}

/* ─── Dashboard Theme (dark) ─── */
[data-theme="dark"].theme-dashboard {
  --bg:            #020617;
  --surface:       var(--navy-900);
  --surface-raised: var(--navy-800);
  --border:        #334155;
  --primary:       var(--indigo-400);
  --primary-hover: var(--indigo-300);
  --primary-text:  #FFFFFF;
  --accent:        var(--indigo-500);
  --header-bg:     var(--navy-900);
  --header-text:   #FFFFFF;
  --sidebar-bg:    var(--navy-900);
  --sidebar-text:  var(--slate-50);
  --sidebar-active: var(--indigo-400);
  --text:          var(--slate-50);
  --text-secondary: var(--slate-400);
  --text-muted:    var(--slate-600);
}

/* ─── Reset + Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg, var(--slate-50));
  color: var(--text, var(--navy-900));
  -webkit-font-smoothing: antialiased;
}

/* ─── Utilitários globais ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-error   { background: var(--error-bg);   color: var(--error-text);   }
.badge-info    { background: var(--info-bg);     color: var(--info-text);    }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 40px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition), transform var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  color: var(--primary-text);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-raised); }

.btn-danger {
  background: var(--error-bg);
  color: var(--error-text);
}
.btn-danger:hover:not(:disabled) { background: #FECACA; }

.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; font-weight: 600; border-radius: var(--radius-lg); }
.btn-xl { height: 64px; padding: 0 32px; font-size: 18px; font-weight: 700; border-radius: var(--radius-lg); }

.input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}