/* ============================================================
   DESIGN SYSTEM — Redação Estratégica
   Material Design 3 inspired
   ============================================================ */

:root {
  /* Paleta principal */
  --color-primary: #1E88E5;
  --color-primary-light: #E3F2FD;
  --color-primary-dark: #1565C0;

  /* UFMG skin */
  --color-ufmg: #C62828;
  --color-ufmg-light: #FFEBEE;
  --color-ufmg-dark: #8E0000;

  /* Acentos */
  --color-gold: #FFD700;
  --color-gold-dark: #F9A825;
  --color-success: #4CAF50;
  --color-success-light: #E8F5E9;
  --color-warning: #FF9800;
  --color-error: #F44336;

  /* Neutros */
  --color-bg: #F5F7FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #FAFAFA;
  --color-border: #E8ECF0;
  --color-border-dark: #D0D7DE;

  /* Texto */
  --color-text-primary: #1A1D23;
  --color-text-secondary: #5C6370;
  --color-text-hint: #9EA5B0;
  --color-text-on-primary: #FFFFFF;

  /* Sombras */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-3: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-4: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  /* Tipografia */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

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

  /* Raios de borda */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transições */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --sidebar-width: 260px;
  --topbar-height: 60px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font-family); border: none; outline: none; }
input, textarea, select { font-family: var(--font-family); outline: none; }

/* Scrollbar customizada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-dark); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-hint); }

/* ── Utilitários de Texto ── */
.text-xs  { font-size: var(--font-size-xs); }
.text-sm  { font-size: var(--font-size-sm); }
.text-md  { font-size: var(--font-size-md); }
.text-lg  { font-size: var(--font-size-lg); }
.text-xl  { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-hint      { color: var(--color-text-hint); }
.text-accent    { color: var(--color-primary); }
.text-gold      { color: var(--color-gold-dark); }
.text-success   { color: var(--color-success); }
.text-error     { color: var(--color-error); }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }

/* ── Utilitários de Layout ── */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.grid   { display: grid; }
.hidden { display: none !important; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.p-4    { padding: var(--space-4); }
.p-6    { padding: var(--space-6); }
.mt-2   { margin-top: var(--space-2); }
.mt-4   { margin-top: var(--space-4); }
.mb-4   { margin-bottom: var(--space-4); }
.mb-6   { margin-bottom: var(--space-6); }

/* ── Animações globais ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.spin   { animation: spin 1s linear infinite; }
.pulse  { animation: pulse 2s ease-in-out infinite; }
.bounce { animation: bounce 1s ease-in-out; }