/**
 * CENJ Design System
 * ===================
 * Sistema de design centralizado para todas as páginas do site CENJ.
 * 
 * Cores Base (Light Theme)
 * - Fundo Principal: #F8F7F4
 * - Texto Principal: #1F1F1F
 * - Texto Secundário: #6B6B6B
 * - Fundo Secundário / Cards: #E8E6E1
 * - Linha / Divisória: #D9D7D3
 * - Hover / Destaque sutil: #FEFEFD
 * 
 * Cores Dourado (Acento CENJ)
 * - Dourado Principal: #D6A040
 * - Hover / Active: #B8922E
 * - Dourado Suave: #E3C37A
 * - Fundo Dourado Sutil: #F3EBDD
 * 
 * Tipografia
 * - Primária (títulos): Montserrat
 * - Secundária (textos): Crimson Pro
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    /* ===== TIPOGRAFIA ===== */
    --font-family-primary: "Montserrat", sans-serif;
    --font-family-secondary: "Crimson Pro", serif;
    
    /* ===== CORES BASE (Light Theme) ===== */
    --bg-primary: #F8F7F4;
    --bg-secondary: #E8E6E1;
    --bg-card: #FEFEFD;
    --text-primary: #1F1F1F;
    --text-secondary: #6B6B6B;
    --border-color: #D9D7D3;
    --hover-subtle: #FEFEFD;
    
    /* ===== CORES DOURADO (Acento) ===== */
    --gold-primary: #D6A040;
    --gold-hover: #B8922E;
    --gold-soft: #E3C37A;
    --gold-bg: #F3EBDD;
    
    /* ===== SOMBRAS ===== */
    --shadow-sm: 0 2px 8px rgba(31, 31, 31, 0.04);
    --shadow-md: 0 8px 25px rgba(31, 31, 31, 0.08);
    --shadow-lg: 0 20px 50px rgba(31, 31, 31, 0.12);
    --shadow-gold: 0 8px 25px rgba(214, 160, 64, 0.15);
    
    /* ===== TRANSIÇÕES ===== */
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.2s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== BORDAS ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;
    
    /* ===== LEGADO (para compatibilidade) ===== */
    --font-color-primary: var(--text-primary);
    --primary-color: var(--gold-primary);
    --secondary-color: var(--text-primary);
    --tertiary-color: var(--border-color);
    --primary-dark: var(--gold-hover);
    --primary-light: var(--gold-soft);
}

/* ===== TIPOGRAFIA BASE ===== */
body {
    font-family: var(--font-family-secondary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary);
    color: var(--text-primary);
}

.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6,
[class$="-hero"] h1,
[class$="-hero"] h2,
[class$="-hero"] h3,
[class$="-hero"] h4,
[class$="-hero"] h5,
[class$="-hero"] h6 {
    color: var(--white, #ffffff);
}

p, span, li, td, th, label, input, textarea, select {
    font-family: var(--font-family-secondary);
}

/* ===== LINKS ===== */
a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-normal);
}

a:hover {
    color: var(--gold-primary);
}

/* ===== BOTÕES ===== */
.btn-primary,
button[type="submit"] {
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-hover) 100%);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.85rem 1.5rem;
    font-family: var(--font-family-secondary);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-gold);
}

.btn-primary:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(214, 160, 64, 0.25);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.5rem;
    font-family: var(--font-family-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-secondary:hover {
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

/* ===== CARDS ===== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-gold);
    border-color: var(--gold-primary);
}

/* ===== INPUTS ===== */
input,
textarea,
select {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    font-size: 1rem;
    color: var(--text-primary);
    transition: var(--transition-smooth);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 4px rgba(214, 160, 64, 0.15);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
}

/* ===== UTILITIES ===== */
.text-gold {
    color: var(--gold-primary);
}

.text-muted {
    color: var(--text-secondary);
}

.bg-gold-subtle {
    background-color: var(--gold-bg);
}

.border-gold {
    border-color: var(--gold-primary);
}

/* ===== EYEBROW / KICKER TEXT ===== */
.eyebrow,
.kicker {
    color: var(--gold-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 0.85rem;
}

/* ===== BADGES / PILLS ===== */
.pill,
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.pill-gold {
    background: var(--gold-bg);
    color: var(--gold-primary);
    border: 1px solid rgba(214, 160, 64, 0.3);
}

.pill-muted {
    background: rgba(31, 31, 31, 0.03);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}