/* tema.css - Tema específico da prática Frequência
 * @version 1.0.0
 * @see docs/ARCHITECTURE-GUIDE.md
 */

:root {
    /* Cores da prática Frequência */
    --pratica-primary: #92B5B8;
    --pratica-primary-dark: #5A8B8F;
    --pratica-primary-darker: #3D6164;
    --pratica-accent: #E8937A;
    --pratica-accent-hover: #D4806A;

    /* Gradientes */
    --pratica-gradient: linear-gradient(135deg, var(--pratica-primary) 0%, var(--pratica-primary-dark) 100%);
    --pratica-gradient-accent: linear-gradient(135deg, var(--pratica-accent) 0%, var(--pratica-accent-hover) 100%);
}

/* ===== HERO ESPECÍFICO ===== */
.hero--frequencia {
    background: var(--pratica-gradient);
    color: white;
}

.hero--frequencia .hero__title {
    color: white;
}

.hero--frequencia .hero__subtitle {
    color: rgba(255, 255, 255, 0.9);
}

/* ===== BADGES ===== */
.badge--frequencia {
    background: var(--pratica-primary);
    color: white;
}

/* ===== CARDS ===== */
.card--frequencia {
    border-left: 4px solid var(--pratica-primary);
}

.card--frequencia:hover {
    border-left-color: var(--pratica-accent);
}

/* ===== PROTOCOLO CARDS ===== */
.protocol-card {
    background: var(--som-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-card);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.protocol-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.protocol-card__icon {
    width: 48px;
    height: 48px;
    background: var(--pratica-gradient);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
}

.protocol-card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--som-text);
}

.protocol-card__description {
    color: var(--som-text-light);
    font-size: var(--font-size-sm);
}

/* ===== GRUPOS ===== */
.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.group-card {
    background: var(--som-bg);
    border: 1px solid var(--som-border);
    border-radius: var(--radius-lg);
    padding: var(--space-card);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-normal);
}

.group-card:hover {
    border-color: var(--pratica-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.group-card__number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--pratica-primary);
    line-height: 1;
}

.group-card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-top: var(--space-2);
}

/* ===== CONSTANTES ===== */
.constante-list {
    list-style: none;
    padding: 0;
}

.constante-item {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--som-border);
}

.constante-item:last-child {
    border-bottom: none;
}

.constante-item__number {
    width: 32px;
    height: 32px;
    background: var(--pratica-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: var(--space-3);
    flex-shrink: 0;
}

/* ===== DARK MODE ===== */
@media (prefers-color-scheme: dark) {
    .protocol-card,
    .group-card {
        background: var(--som-bg-alt);
    }
}