@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* 
   =======================================================================
   COBEA - SISTEMA DE DESIGN FLAT PREMIUM (BOOTSTRAP 4 VERSION)
   Definição central de tokens e estilos fundamentais do portal.
   ======================================================================= 
*/

:root {
  /* ── Brand Colors ──────────────────────────────────── */
  --color-primary:        #F59E0B;
  --color-primary-hover:  #D97706;
  --color-secondary:      #1E3A8A;
  --color-secondary-hover:#1E40AF;
  --color-danger:         #E11D48;
  --color-danger-hover:   #BE123C;
  --color-success:        #10B981;
  --color-success-hover:  #059669;
  --color-warning:        #F59E0B;
  --color-warning-hover:  #D97706;
  --color-info:           #0EA5E9;
  --color-info-hover:     #0284C7;

  /* ── Text Scale (Deep Slate - Optimized for AAA Comfort)
     Contrast vs White (#FFF):
     950 → 19.5:1 AAA | 900 → 15.5:1 AAA (H1, H2)
     800 → 12.6:1 AAA | 700 → 10.3:1 AAA (Body Text)
     600 →  8.9:1 AAA | 500 →  5.9:1 AA+ (Labels/Captions)
     400 →  4.75:1 AA | 300 →  2.8:1     (Disabled)
     ─────────────────────────────────────────────────── */
  --text-950: #020617;
  --text-900: #0F172A;
  --text-800: #1E293B;
  --text-700: #2C394F;
  --text-600: #334155;
  --text-500: #475569;  /* Novo valor para Labels — Nitidez total */
  --text-400: #64748B;  /* Placeholders acessíveis */
  --text-300: #94A3B8;
  --text-200: #CBD5E1;

  /* ── Semantic Text Role Aliases ────────────────────────
     Use SEMPRE estes aliases no CSS — nunca os numéricos diretos.
     ─────────────────────────────────────────────────── */
  --text-heading:     var(--text-900);  /* Títulos principais */
  --text-subheading:  var(--text-800);  /* Subtítulos estruturais */
  --text-body:        var(--text-700);  /* Leitura confortável */
  --text-caption:     var(--text-600);  /* Subtexto e contextos */
  --text-label:       var(--text-500);  /* Rótulos de formulário */
  --text-muted:       var(--text-400);  /* Placeholders e elementos secundários */
  --text-disabled:    var(--text-300);  /* Desativados */
  --text-on-dark:     #F8FAFC;          /* Texto sobre escuro */

  /* ── Backward-compat aliases (não remova — usados em body e templates) */
  --color-text-dark:        var(--text-heading);
  --color-text-main:        var(--text-body);
  --color-text-muted:       var(--text-muted);
  --color-text-light:       var(--text-on-dark);

  /* ── Backgrounds & Borders ─────────────────────────── */
  --color-bg-body:        #F8FAFC;
  --color-bg-card:        #FFFFFF;
  --color-border:         #E2E8F0;

  /* ── Radii & Sizing ────────────────────────────────── */
  --radius-button:        1.5rem;
  --radius-field:         2rem;      /* Inputs pílula */
  --radius-lg:            1rem;
  --radius-xl:            1.5rem;
  --radius-full:          9999px;
  --field-height:         2.375rem;  /* 38px */

  /* ── Typography ────────────────────────────────────── */
  --font-family-base:     'Open Sans', sans-serif;
  --font-family-title:    'Outfit', sans-serif;

  /* ── Extra Tokens ──────────────────────────────────── */
  --color-white-5:        rgba(255, 255, 255, 0.05);
  --color-white-10:       rgba(255, 255, 255, 0.1);

  /* ── Layout / Navbar ───────────────────────────────── */
  --container-width:      100%;
  --container-padding:    1rem;
  --navbar-height:        4.5rem;
  --navbar-height-lg:     clamp(4.5rem, 6vw, 6rem);

  /* ══ Form Design Tokens ════════════════════════════════
     Modifique aqui para propagar em todos os formulários.
     ═══════════════════════════════════════════════════════ */

  /* Labels — rótulos acima de cada campo */
  --form-label-color:          var(--text-label);   /* slate-500 — contraste 4.6:1 em fundo branco ✓ */
  --form-label-font-family:    var(--font-family-base);  /* Open Sans — explícito, não herda */
  --form-label-font-size:      0.625rem;             /* 10px — legível em uppercase */
  --form-label-font-weight:    700;                  /* Bold — 900 em uppercase agride legibilidade */
  --form-label-letter-spacing: 0.12em;              /* ~1.2px — mantém légua institucional */
  --form-label-margin-bottom:  0.5rem;
  --form-label-transform:      uppercase;

  /* Section legends — títulos de grupo dentro dos forms */
  --form-section-color:          var(--color-secondary);  /* Azul institucional */
  --form-section-font-family:    var(--font-family-base); /* Open Sans — explícito, evita herdar serif */
  --form-section-font-size:      0.625rem;                /* Mesma escala dos labels */
  --form-section-font-weight:    800;                     /* Mais que label, menos que 900 */
  --form-section-letter-spacing: 0.18em;                  /* Respiração amp la para uppercase */
  --form-section-border-color:   rgba(226, 232, 240, 0.65);
  --form-section-margin-bottom:  1.5rem;
  --form-section-padding-bottom: 0.65rem;

  /* Placeholders — texto não essencial dentro dos inputs */
  --form-placeholder-color:      var(--text-muted);     /* slate-400 — claramente secundário */
  --form-placeholder-font-style: normal;                /* Não italic — melhora leitura (WCAG 1.4.8) */
  --form-placeholder-font-size:  0.875rem;              /* Mesmo tamanho do campo */
  --form-placeholder-font-weight: 400;                  /* Regular — não compete com o que o usuário digita */

  /* Disabled — inputs e controles desabilitados */
  --form-disabled-color:         var(--text-disabled);
  /* ══ Status & Alerts ══════════════════════════════════
     Tokens para estados de feedback (Sucesso, Erro, etc).
     Baseados em opacidade 10-15% para fundos suaves.
     ══════════════════════════════════════════════════════ */
  --status-success-bg:     rgba(16, 185, 129, 0.1);
  --status-success-border: rgba(16, 185, 129, 0.25);
  --status-success-text:   #065F46;

  --status-danger-bg:      rgba(225, 29, 72, 0.08);
  --status-danger-border:  rgba(225, 29, 72, 0.2);
  --status-danger-text:    #9F1239;

  --status-warning-bg:     rgba(245, 158, 11, 0.08);
  --status-warning-border: rgba(245, 158, 11, 0.25);
  --status-warning-text:   #92400E;

  --status-info-bg:        rgba(14, 165, 233, 0.1);
  --status-info-border:    rgba(14, 165, 233, 0.25);
  --status-info-text:      #075985;

  /* ── Elite Typography System (2025 Standard) ────────── 
     Centralizando a escala editorial para controle global.
     ─────────────────────────────────────────────────── */
  --type-hero-h1:         clamp(2.25rem, 6vw, 4rem);
  --type-hero-p:          clamp(1.15rem, 2vw, 1.4rem);
  --type-hero-label:      0.85rem;
  
  --type-section-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
  --type-section-p:       1.15rem;
  
  --type-title-md:        1.25rem;
  --type-title-sm:        1.1rem;
  --type-card-h3:         1rem;
  --type-card-p:          0.9rem;

  /* Ratios de Espaçamento e Peso */
  --weight-black:         900;
  --weight-bold:          700;
  --weight-medium:        500;
  
  --tracking-tighter-plus: -0.04em;
  --tracking-tighter:      -0.02em;
  --tracking-widest-plus:  0.25em;
}



/* ====================================================================
   OVERWRITING BOOTSTRAP / ADMINLTE DEFAULTS WITH BRAND TOKENS
   ==================================================================== */

html {
    font-size: 1rem;
    overflow-x: hidden;
}

body {
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    font-family: var(--font-family-base);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body h1, body h2, body h3, body h4, body h5, body h6, 
body .font-title {
    font-family: var(--font-family-title);
}

/* Force Brand & Text Tokens on Bootstrap Utilities */
body .bg-secondary, body .bg-secondary-cobea { background-color: var(--color-secondary) !important; }
body .bg-primary, body .bg-primary-cobea     { background-color: var(--color-primary) !important; }
body .bg-white-5 { background-color: var(--color-white-5) !important; }
body .bg-white-10 { background-color: var(--color-white-10) !important; }
body .text-primary   { color: var(--color-primary) !important; }
body .text-secondary { color: var(--color-secondary) !important; }
body .text-danger    { color: var(--color-danger) !important; }
body .text-success   { color: var(--color-success) !important; }
body .text-warning   { color: var(--color-warning) !important; }
body .text-info      { color: var(--color-info) !important; }
body .text-muted     { color: var(--text-muted) !important; }
body .text-dark      { color: var(--text-heading) !important; }
body .text-white-5    { color: var(--color-white-5) !important; }
body .text-white-10   { color: var(--color-white-10) !important; }
body .border-primary { border-color: var(--color-primary) !important; }
body .border-success { border-color: var(--color-success) !important; }
body .border-danger  { border-color: var(--color-danger) !important; }
body .border-light   { border-color: var(--color-border) !important; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }

/* ====================================================================
   COMPONENTES GLOBAIS - FLAT PREMIUM
   ==================================================================== */

/* Utilitarios extras do design system */
.font-weight-medium { font-weight: 500 !important; }
.font-weight-black { font-weight: 900 !important; }
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }
.leading-none { line-height: 1 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.italic { font-style: italic !important; }

/* Correção de Componentes do AdminLTE */
blockquote { 
    border-left: none !important; 
    padding-left: 0 !important; 
    margin: 0 0 1rem 0 !important; 
    font-size: inherit !important; 
}

/* Botões Padronizados */
body .btn,
body button,
body input[type="button"],
body input[type="submit"],
body a.btn,
body .btn-cobea,
body .pagination-nav-btn,
body .pagination-page-btn,
body .adoption-filter,
.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

body .btn,
body .btn-cobea,
.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded-pill {
    border-radius: var(--radius-full) !important;
}