/* ═══════════════════════════════════════════════════════════════════
   BASE.CSS — Reset global, design tokens, tipografia e utilitários.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Custom Properties (Design Tokens) ──────────────────────────── */
:root {
  /* Cores principais */
  --c-primary:       #2563EB;
  --c-primary-dark:  #1D4ED8;
  --c-primary-light: #EFF6FF;
  --c-secondary:     #7C3AED;
  --c-secondary-light:#F5F3FF;
  --c-success:       #059669;
  --c-success-light: #ECFDF5;
  --c-warning:       #D97706;
  --c-warning-light: #FFFBEB;
  --c-danger:        #DC2626;
  --c-danger-light:  #FEF2F2;
  --c-info:          #0891B2;
  --c-info-light:    #F0F9FF;
  --c-neutral:       #64748B;
  --c-neutral-light: #F8FAFC;

  /* Superfícies e fundos */
  --c-bg:            #F8FAFC;
  --c-surface:       #FFFFFF;
  --c-surface-hover: #F1F5F9;
  --c-elevated:      #FFFFFF;
  --c-divider:       #E2E8F0;
  --c-border:        #E2E8F0;
  --c-border-focus:  #2563EB;

  /* Texto */
  --c-text-primary:   #0F172A;
  --c-text-secondary: #475569;
  --c-text-tertiary:  #94A3B8;
  --c-text-inverted:  #FFFFFF;

  /* Tipografia */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* Tamanhos de fonte */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base:13px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  /* Espaçamentos */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

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

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.05);
  --shadow-focus: 0 0 0 3px rgba(37,99,235,.2);

  /* Transições */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-slow:   350ms ease;

  /* Layout */
  --sidebar-w:          240px;
  --sidebar-w-collapsed: 60px;
  --header-h:           56px;
  --content-max-w:      1600px;
}

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

html { font-size: 14px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  color:            var(--c-text-primary);
  background:       var(--c-bg);
  line-height:      1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: inherit;
  font-size:   inherit;
}

button { cursor: pointer; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

/* ── Scroll ─────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--c-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-tertiary); }

/* ── Animações globais ───────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}
@keyframes progressFill {
  from { width: 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.anim-fadein      { animation: fadeIn      var(--t-normal) both; }
.anim-fadein-scale { animation: fadeInScale var(--t-normal) both; }

/* ── Utilitários ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono      { font-family: var(--font-mono); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-md   { font-size: var(--text-md); }
.text-muted { color: var(--c-text-tertiary); }

/* ── Spinner ─────────────────────────────────────────────────────── */
.spinner {
  display:       inline-block;
  border-radius: 50%;
  border-style:  solid;
  border-color:  var(--c-divider);
  border-top-color: var(--c-primary);
  animation:     spin .7s linear infinite;
}
.spinner-sm { width:16px; height:16px; border-width:2px; }
.spinner-md { width:24px; height:24px; border-width:3px; }
.spinner-lg { width:36px; height:36px; border-width:4px; }

/* ── Empty state ─────────────────────────────────────────────────── */
.empty-state {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content:center;
  padding:        var(--sp-12) var(--sp-6);
  text-align:     center;
  color:          var(--c-text-tertiary);
}
.empty-state-icon { font-size: 36px; margin-bottom: var(--sp-3); opacity: .5; }
.empty-state-title   { font-size: var(--text-md); font-weight: 600; color: var(--c-text-secondary); margin-bottom: var(--sp-1); }
.empty-state-subtitle { font-size: var(--text-sm); }

/* ── Badge ───────────────────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 8px;
  border-radius: var(--r-full);
  font-size:     var(--text-xs);
  font-weight:   600;
  line-height:   1.4;
  white-space:   nowrap;
}
.badge-primary  { background:var(--c-primary-light); color:var(--c-primary); }
.badge-success  { background:var(--c-success-light); color:var(--c-success); }
.badge-warning  { background:var(--c-warning-light); color:var(--c-warning); }
.badge-danger   { background:var(--c-danger-light);  color:var(--c-danger);  }
.badge-neutral  { background:var(--c-neutral-light); color:var(--c-neutral); }
.badge-info     { background:var(--c-info-light);    color:var(--c-info);    }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--sp-2);
  padding:        var(--sp-2) var(--sp-4);
  border-radius:  var(--r-md);
  font-size:      var(--text-sm);
  font-weight:    500;
  border:         1px solid transparent;
  transition:     all var(--t-fast);
  white-space:    nowrap;
  text-decoration:none;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.btn-primary:hover { background:var(--c-primary-dark); border-color:var(--c-primary-dark); }

.btn-outline { background:transparent; color:var(--c-text-secondary); border-color:var(--c-border); }
.btn-outline:hover { background:var(--c-surface-hover); color:var(--c-text-primary); }

.btn-ghost { background:transparent; color:var(--c-text-secondary); border-color:transparent; }
.btn-ghost:hover { background:var(--c-surface-hover); color:var(--c-text-primary); }

.btn-sm { padding:var(--sp-1) var(--sp-3); font-size:var(--text-xs); gap:var(--sp-1); }
.btn-xs { padding:2px 8px; font-size:var(--text-2xs); }

/* ── Warning box ─────────────────────────────────────────────────── */
.warning-box {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-3);
  padding:       var(--sp-3) var(--sp-4);
  background:    var(--c-warning-light);
  border:        1px solid #FCD34D;
  border-radius: var(--r-md);
  color:         #92400E;
  font-size:     var(--text-sm);
}
.warning-box > i { flex-shrink:0; margin-top:2px; color:var(--c-warning); }

/* ── Error message ───────────────────────────────────────────────── */
.error-message {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  padding:       var(--sp-3) var(--sp-4);
  background:    var(--c-danger-light);
  border:        1px solid #FECACA;
  border-radius: var(--r-md);
  color:         #991B1B;
  font-size:     var(--text-sm);
}