/* Text style options for main title – Manrope, various gradients and contrast */

/* 1. Classic – current Manrope + orange→red gradient (default) */
body[data-text-style="classic"] #main-title.title-text {
    background: linear-gradient(135deg, var(--accent-orange), var(--accent-red)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* 2. Sunset – warmer gradient: deep orange → coral → soft red */
body[data-text-style="sunset"] #main-title.title-text {
    background: linear-gradient(135deg, #e85d3a 0%, #f4a574 40%, #d94a4a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* 3. Ocean – cool gradient: teal → blue (contrast + interest) */
body[data-text-style="ocean"] #main-title.title-text {
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 50%, #0369a1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* 4. High contrast – solid dark with subtle depth */
body[data-text-style="high-contrast"] #main-title.title-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #1a1a2e !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

body.dark-mode[data-text-style="high-contrast"] #main-title.title-text {
    color: #f3f4f6 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 5. Fire – bold red-orange gradient, stronger contrast */
body[data-text-style="fire"] #main-title.title-text {
    background: linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #c2410c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}