/* ═══════════════════════════════════════════════════════════════════════════
   ESALQLAB · Design Tokens (oficiais da brand)
   Paleta: Azul Petróleo #1D5470 (60%) + Verde Lima #8DB83A (25%) + neutros
   Tipografia: Inter / Barlow (web equivalent do Calibri)
   Lema: "Medir para Gerenciar"
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Cores primárias ── */
  --esalq-teal:         #1D5470;   /* Azul Petróleo — primária */
  --esalq-teal-dark:    #144158;   /* variação escura */
  --esalq-teal-light:   #3A7894;   /* variação clara */
  --esalq-teal-50:      #E8EFF3;   /* background muito claro */

  --esalq-green:        #8DB83A;   /* Verde Lima — acento */
  --esalq-green-dark:   #6F9829;   /* hover/pressed */
  --esalq-green-light:  #A8CB5C;
  --esalq-green-50:     #F1F7E2;

  --esalq-dark:         #0A0F0A;   /* Preto institucional */
  --esalq-forest:       #111C0E;   /* Verde Floresta — fundos escuros */
  --esalq-night:        #1A2B14;   /* Verde Noturno — variação */

  /* ── Neutros ── */
  --bg:                 #FFFFFF;
  --bg-soft:            #F7F9FB;   /* backgrounds suaves */
  --bg-zebra:           #F0F4F6;   /* linhas alternadas em tabelas (oficial) */
  --surface:            #FFFFFF;
  --border:             #E4E9EE;
  --border-strong:      #CDD6DE;

  --text:               #0A0F0A;   /* Preto oficial */
  --text-strong:        #0A0F0A;
  --text-muted:         #4A5560;
  --text-soft:          #7A8592;
  --text-on-teal:       #FFFFFF;
  --text-on-green:      #0A0F0A;

  /* ── Estados ── */
  --danger:             #D64545;
  --warn:               #E0A128;
  --ok:                 var(--esalq-green-dark);
  --info:               var(--esalq-teal);

  /* ── Raios ── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Sombras ── */
  --shadow-sm: 0 1px 2px rgba(10,15,10,.06);
  --shadow:    0 4px 14px rgba(10,15,10,.08);
  --shadow-lg: 0 14px 40px rgba(10,15,10,.14);
  --shadow-brand: 0 10px 30px rgba(29,84,112,.25);

  /* ── Tipografia ── */
  --font-sans:    'Inter', 'Calibri', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Barlow', 'Calibri', 'Inter', system-ui, sans-serif;
  --font-serif:   'Lora', 'Georgia', serif;
  --font-mono:    'Consolas', 'Menlo', monospace;

  /* ── Espaçamento ── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-8: 48px;  --space-10: 64px; --space-12: 96px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg-soft);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text-strong);
  font-weight: 700;
}

a { color: var(--esalq-teal); text-decoration: none; }
a:hover { color: var(--esalq-teal-dark); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   Componentes reutilizáveis
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Botões ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  text-decoration: none;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--esalq-teal);
  color: var(--text-on-teal);
}
.btn-primary:hover { background: var(--esalq-teal-dark); box-shadow: var(--shadow-brand); color: #fff; text-decoration: none; }

.btn-accent {
  background: var(--esalq-green);
  color: var(--text-on-green);
}
.btn-accent:hover { background: var(--esalq-green-dark); color: #fff; text-decoration: none; }

.btn-ghost {
  background: transparent;
  color: var(--esalq-teal);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--esalq-teal-50); border-color: var(--esalq-teal); text-decoration: none; }

.btn-danger {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-strong);
}
.btn-danger:hover { background: #FDECEC; border-color: var(--danger); color: var(--danger); text-decoration: none; }

.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }

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

/* ── Inputs ── */
.input, .textarea, .select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--font-sans);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--esalq-teal);
  box-shadow: 0 0 0 3px rgba(29,84,112,.12);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--esalq-teal-50); color: var(--esalq-teal);
  border: 1px solid rgba(29,84,112,.2);
}
.badge-accent { background: var(--esalq-green-50); color: var(--esalq-green-dark); border-color: rgba(141,184,58,.3); }
.badge-danger { background: #FDECEC; color: var(--danger); border-color: #F4B4B4; }

/* ── Gradientes da marca ── */
.brand-gradient       { background: linear-gradient(135deg, var(--esalq-teal) 0%, var(--esalq-teal-dark) 100%); }
.brand-accent-gradient{ background: linear-gradient(135deg, var(--esalq-green) 0%, var(--esalq-green-dark) 100%); }
.brand-mixed-gradient { background: linear-gradient(135deg, var(--esalq-teal) 0%, var(--esalq-green) 150%); }

/* ── Tabelas (padrão brand) ── */
.table-brand {
  width: 100%; border-collapse: collapse;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border);
}
.table-brand thead th {
  background: var(--esalq-teal); color: #fff;
  text-align: left; font-weight: 600; padding: 12px 14px;
  font-family: var(--font-display); font-size: 14px; letter-spacing: .02em;
}
.table-brand tbody td { padding: 11px 14px; border-top: 1px solid var(--border); font-size: 14px; }
.table-brand tbody tr:nth-child(even) td { background: var(--bg-zebra); }

/* ── Accent box (borda esquerda verde lima — oficial) ── */
.accent-box {
  background: var(--esalq-green-50);
  border-left: 4px solid var(--esalq-green);
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
}

/* ── Rodapé oficial ── */
.brand-footer {
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--text-muted);
  flex-wrap: wrap; gap: 12px;
}
.brand-footer .tagline {
  font-style: italic; font-family: var(--font-display); font-weight: 500;
  color: var(--esalq-teal);
}
.brand-footer .site a { color: var(--esalq-teal); font-weight: 500; }

/* ── Scrollbar brand ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--esalq-teal-light); }

/* ── Utilitários ── */
.text-brand      { color: var(--esalq-teal); }
.text-accent     { color: var(--esalq-green-dark); }
.text-muted      { color: var(--text-muted); }
.text-soft       { color: var(--text-soft); }
.tag-tagline     { font-style: italic; font-family: var(--font-display); color: var(--esalq-teal); }
.sr-only         { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ══ Argos Wireframe palette (extension) ══ */
:root {
  --argos-navy:       #0F2A44;
  --argos-navy-deep:  #081A2D;
  --argos-teal-deep:  #113A52;
  --argos-ochre:      #D4A43C;
  --argos-clay:       #B8561F;
  --argos-cream:      #F5E9CF;
  --argos-sky:        #7FB3C9;
  --argos-highlight:  #FFF9D6;
  --argos-canvas:     #F4F6F8;
  --argos-soft:       #EEF2F5;
  --argos-line-soft:  #AAB7C2;
  --argos-muted:      #3A4854;
  --font-display-argos: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono-argos:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}