:root {
    --ai-brand-purple: #4A3A6B;
    --ai-brand-purple-hover: #5B4A7C;
    --ai-serif: 'Source Serif 4', 'Noto Serif SC', Georgia, serif;
}

/* Shared title treatment. Hero titles keep their light contrast on the dark hero. */
.ai-tool-page h1,
.ai-tool-page h2,
.ai-tool-page h3,
.ai-tool-page h4 {
    font-family: var(--ai-serif) !important;
    color: var(--ai-brand-purple) !important;
}

.ai-tool-page .page-hero h1 {
    font-family: var(--ai-serif) !important;
    color: #FFFFFF !important;
}

.ai-tool-page .ac-header h1 span {
    color: var(--ai-brand-purple) !important;
}

/* Primary and outline controls share dimensions, typography, and hover motion. */
.ai-tool-page .solid-button,
.ai-tool-page .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 18px;
    border: 1px solid var(--ai-brand-purple) !important;
    border-radius: 10px;
    background: var(--ai-brand-purple) !important;
    color: #FFFFFF !important;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-tool-page .solid-button:hover,
.ai-tool-page .btn-primary:hover {
    background: var(--ai-brand-purple-hover) !important;
    border-color: var(--ai-brand-purple-hover) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 58, 107, 0.2);
}

.ai-tool-page .ghost-button,
.ai-tool-page .btn-outline,
.ai-tool-page .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 18px;
    border: 1px solid var(--ai-brand-purple) !important;
    border-radius: 10px;
    background: #FFFFFF !important;
    color: var(--ai-brand-purple) !important;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-tool-page .ghost-button:hover,
.ai-tool-page .btn-outline:hover,
.ai-tool-page .btn-secondary:hover {
    background: #F0EDF5 !important;
    border-color: var(--ai-brand-purple-hover) !important;
    color: var(--ai-brand-purple-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 58, 107, 0.12);
}

/* Preserve readable contrast for the two controls placed on the dark hero. */
.ai-tool-page .hero-actions .solid-button {
    background: linear-gradient(135deg, #D4AF37 0%, #E0BE4A 100%) !important;
    border-color: #B8962E !important;
    color: #3D3A52 !important;
}

.ai-tool-page .hero-actions .ghost-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #FFFFFF !important;
}

@media (max-width: 640px) {
    .ai-tool-page .solid-button,
    .ai-tool-page .ghost-button,
    .ai-tool-page .btn-primary,
    .ai-tool-page .btn-outline,
    .ai-tool-page .btn-secondary {
        min-height: 38px;
        padding: 9px 14px;
    }
}