/**
 * AI Free Tools - Global Dark Legibility System (WCAG AA/AAA compliant)
 * Author: Phoenix Architect
 * Path: C:\Users\Yehamahé\.gemini\antigravity\scratch\ai-free-tools-public-redesign\assets\css\aft-dark-readable-system.css
 */

:root {
    /* Standardized design tokens */
    --aft-bg-main: #070814;
    --aft-bg-panel: #0f1224;
    --aft-bg-card: #11162a;
    --aft-text-main: #f8fafc;
    --aft-text-body: #e5e7eb;
    --aft-text-muted: #cbd5e1;
    --aft-text-soft: #94a3b8;
    --aft-border-soft: rgba(148, 163, 184, 0.32);
    --aft-input-bg: #0b1020;
    --aft-input-text: #f8fafc;
    --aft-input-placeholder: #94a3b8;
    --aft-link: #a78bfa;
    --aft-link-hover: #c4b5fd;
    --aft-accent: #8b5cf6;
    --aft-accent-2: #22d3ee;
    --aft-error: #fca5a5;
    --aft-success: #86efac;
}

/* 1. Global Core Layouts Legibility Scopes */
body,
.aft-site,
.aft-tool-page,
.aft-single-tool,
.aft-article,
.single-ai-tool,
.single-tool,
.single-post,
.page-template-default,
.page {
    background-color: var(--aft-bg-main) !important;
    background: radial-gradient(circle at 10% 0%, rgba(255, 107, 26, 0.14), transparent 30%),
                radial-gradient(circle at 90% 0%, rgba(139, 92, 246, 0.13), transparent 35%),
                var(--aft-bg-main) !important;
    color: var(--aft-text-body) !important;
    font-family: "Inter", system-ui, -apple-system, sans-serif !important;
    line-height: 1.62 !important;
}

/* 2. Defeat ID-specific, inline, and Spectra dynamic hexadecimal colors */
body:not(.autosuperbrain-dashboard) .entry-content h1,
body:not(.autosuperbrain-dashboard) .entry-content h2,
body:not(.autosuperbrain-dashboard) .entry-content h3,
body:not(.autosuperbrain-dashboard) .entry-content h4,
body:not(.autosuperbrain-dashboard) .entry-content h5,
body:not(.autosuperbrain-dashboard) .entry-content h6,
body:not(.autosuperbrain-dashboard) .entry-content p,
body:not(.autosuperbrain-dashboard) .entry-content li,
body:not(.autosuperbrain-dashboard) .entry-content span:not(.aft-brand):not(.aft-card-badge),
body:not(.autosuperbrain-dashboard) .entry-content div:not(.aft-btn):not(.aft-card),
body:not(.autosuperbrain-dashboard) .entry-content label,
body:not(.autosuperbrain-dashboard) .entry-content small,
body:not(.autosuperbrain-dashboard) .entry-content a:not(.aft-btn),
body:not(.autosuperbrain-dashboard) .aft-tool-frame h1,
body:not(.autosuperbrain-dashboard) .aft-tool-frame h2,
body:not(.autosuperbrain-dashboard) .aft-tool-frame h3,
body:not(.autosuperbrain-dashboard) .aft-tool-frame h4,
body:not(.autosuperbrain-dashboard) .aft-tool-frame h5,
body:not(.autosuperbrain-dashboard) .aft-tool-frame h6,
body:not(.autosuperbrain-dashboard) .aft-tool-frame p,
body:not(.autosuperbrain-dashboard) .aft-tool-frame li,
body:not(.autosuperbrain-dashboard) .aft-tool-frame span:not(.aft-brand):not(.aft-card-badge),
body:not(.autosuperbrain-dashboard) .aft-tool-frame label,
body:not(.autosuperbrain-dashboard) .aft-tool-frame small,
body:not(.autosuperbrain-dashboard) .aft-tool-frame a:not(.aft-btn),
.single-ai-tool h1, .single-ai-tool h2, .single-ai-tool h3, .single-ai-tool h4, .single-ai-tool h5, .single-ai-tool h6,
.single-ai-tool p, .single-ai-tool li, .single-ai-tool span:not(.aft-brand):not(.aft-card-badge), .single-ai-tool label, .single-ai-tool small, .single-ai-tool a:not(.aft-btn) {
    color: var(--aft-text-body) !important;
    -webkit-text-fill-color: var(--aft-text-body) !important;
    opacity: 1 !important;
}

body:not(.autosuperbrain-dashboard) .entry-content h1,
body:not(.autosuperbrain-dashboard) .entry-content h2,
body:not(.autosuperbrain-dashboard) .entry-content h3,
body:not(.autosuperbrain-dashboard) .entry-content h4,
body:not(.autosuperbrain-dashboard) .aft-tool-frame h1,
body:not(.autosuperbrain-dashboard) .aft-tool-frame h2,
body:not(.autosuperbrain-dashboard) .aft-tool-frame h3,
body:not(.autosuperbrain-dashboard) .aft-tool-frame h4,
.single-ai-tool h1, .single-ai-tool h2, .single-ai-tool h3, .single-ai-tool h4 {
    color: var(--aft-text-main) !important;
    -webkit-text-fill-color: var(--aft-text-main) !important;
    font-weight: 800 !important;
}

/* 3. Force all Gutenberg layouts, Spectra sections, and content rows to inherit dark backgrounds */
body:not(.autosuperbrain-dashboard) .entry-content,
body:not(.autosuperbrain-dashboard) .wp-block-group,
body:not(.autosuperbrain-dashboard) .wp-block-column,
body:not(.autosuperbrain-dashboard) .wp-block-columns,
body:not(.autosuperbrain-dashboard) .wp-block-uagb-section,
body:not(.autosuperbrain-dashboard) .uagb-section__wrap,
body:not(.autosuperbrain-dashboard) .uagb-section-background-wrap,
body:not(.autosuperbrain-dashboard) .uagb-column__wrap,
body:not(.autosuperbrain-dashboard) .uagb-columns__wrap,
body:not(.autosuperbrain-dashboard) .ast-container,
body:not(.autosuperbrain-dashboard) .ast-row,
body:not(.autosuperbrain-dashboard) #content,
body:not(.autosuperbrain-dashboard) #primary,
body:not(.autosuperbrain-dashboard) #main,
body:not(.autosuperbrain-dashboard) article,
body:not(.autosuperbrain-dashboard) section,
body:not(.autosuperbrain-dashboard) .entry-content *:not(.aft-btn):not(.aft-card-badge):not(input):not(textarea):not(select):not(button) {
    background-color: var(--aft-bg-main) !important;
    background: var(--aft-bg-main) !important;
    border-color: var(--aft-border-soft) !important;
}

/* For cards, code boxes, and details panel inside content, use a slightly lighter card panel */
body:not(.autosuperbrain-dashboard) .wp-block-group.has-background,
body:not(.autosuperbrain-dashboard) .wp-block-column.has-background,
body:not(.autosuperbrain-dashboard) .uagb-column__wrap.has-background,
body:not(.autosuperbrain-dashboard) .aft-card,
body:not(.autosuperbrain-dashboard) .aft-content-card,
body:not(.autosuperbrain-dashboard) .aft-tool-frame,
.aft-card,
.aft-content-card,
.aft-tool-frame {
    background-color: var(--aft-bg-card) !important;
    background: var(--aft-bg-card) !important;
    border-color: var(--aft-border-soft) !important;
}

/* 4. Forms, Inputs, Textareas, Selects and Placeholders */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea,
select {
    background: var(--aft-input-bg) !important;
    background-color: var(--aft-input-bg) !important;
    color: var(--aft-input-text) !important;
    border: 1px solid var(--aft-border-soft) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-family: "Inter", sans-serif !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Focus high-contrast highlights */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--aft-accent) !important;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.22) !important;
}

/* Placeholder visibility rules */
input::placeholder,
textarea::placeholder,
::-webkit-input-placeholder,
:-ms-input-placeholder,
::-moz-placeholder {
    color: var(--aft-input-placeholder) !important;
    -webkit-text-fill-color: var(--aft-input-placeholder) !important;
    opacity: 1 !important;
}

/* Visible Bold Labels */
label {
    color: var(--aft-text-muted) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
    font-size: 14px !important;
}

/* 5. Hyperlinks and navigation overrides */
a {
    color: var(--aft-link) !important;
    text-decoration: none !important;
    transition: color 0.15s ease-in-out !important;
}

a:hover,
a:focus {
    color: var(--aft-link-hover) !important;
    text-decoration: underline !important;
}

/* 6. Buttons & High contrast CTAs */
button,
.button,
.aft-btn,
.wp-block-button__link,
input[type="submit"] {
    font-family: "Sora", "Outfit", sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.aft-btn-primary {
    background: linear-gradient(135deg, #ff6b1a, var(--aft-accent)) !important;
    box-shadow: 0 4px 18px rgba(139, 92, 246, 0.25) !important;
}

.aft-btn-primary:hover {
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.4) !important;
    transform: translateY(-1px) !important;
}

.aft-btn-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--aft-border-soft) !important;
    color: var(--aft-text-main) !important;
}

.aft-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--aft-text-muted) !important;
}

/* 7. Premium Content Panels & Cards */
.aft-card,
.aft-content-card {
    background-color: var(--aft-bg-card) !important;
    border: 1px solid var(--aft-border-soft) !important;
    border-radius: 20px !important;
}

.aft-card p,
.aft-content-card p {
    color: var(--aft-text-soft) !important;
}

/* 8. Scoped tool CPT results output frame */
.aft-tool-frame {
    background-color: var(--aft-bg-panel) !important;
    border: 1px solid var(--aft-border-soft) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    margin-bottom: 32px !important;
}

.aft-tool-frame p,
.aft-tool-frame li,
.aft-tool-frame span,
.aft-tool-frame div:not(.aft-btn),
.aft-tool-frame label {
    color: var(--aft-text-body) !important;
}

.aft-tool-frame h2,
.aft-tool-frame h3,
.aft-tool-frame h4 {
    color: var(--aft-text-main) !important;
    border-bottom: 1px solid var(--aft-border-soft) !important;
    padding-bottom: 8px !important;
    margin-top: 24px !important;
}