/* TARGETED FIX - WHITE TEXT ONLY ON GRADIENT COMPONENT CARDS */

/* Reset and establish base color system */
* {
    color: inherit;
}

/* Root color definitions */
:root {
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --background: #ffffff;
    --surface: #f9fafb;
    --border: #e5e7eb;
    --primary-color: #2563eb;
}

/* Dark theme colors */
[data-theme="dark"] {
    --text-primary: #ffffff;
    --text-secondary: #e5e7eb;
    --text-muted: #d1d5db;
    --background: #0f172a;
    --surface: #1e293b;
    --border: #334155;
    --primary-color: #60a5fa;
    color-scheme: dark;
}

/* Base typography - NORMAL COLORS */
body {
    color: var(--text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.6 !important;
    background: var(--background) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

p, span, div, li {
    color: var(--text-secondary) !important;
}

a {
    color: var(--primary-color) !important;
}

/* Navigation - NORMAL COLORS */
.nav__title {
    color: var(--text-primary) !important;
}

.nav__link {
    color: var(--text-secondary) !important;
}

.nav__link:hover,
.nav__link--active {
    color: var(--primary-color) !important;
}

/* Component selectors - NORMAL COLORS */
.component-selector {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

.component-selector * {
    color: var(--text-primary) !important;
}

.component-header h3 {
    color: var(--text-primary) !important;
}

.component-icon {
    color: var(--primary-color) !important;
}

/* Buttons - NORMAL COLORS */
.btn-primary,
#calculate-btn {
    color: #ffffff !important;
    background: var(--primary-color) !important;
}

.btn-secondary,
#clear-btn {
    color: var(--text-primary) !important;
    background: var(--surface) !important;
}

/* Cards - NORMAL COLORS */
.stat-card,
.feature,
.contact-info,
.sidebar-widget {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

.stat-card *,
.feature *,
.contact-info *,
.sidebar-widget * {
    color: var(--text-primary) !important;
}

/* Footer - NORMAL COLORS */
.footer {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

.footer * {
    color: var(--text-primary) !important;
}

/* ONLY TARGET GRADIENT BACKGROUNDS - WHITE TEXT */
*[style*="linear-gradient"] {
    color: #ffffff !important;
}

*[style*="linear-gradient"] * {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* Hero sections - WHITE TEXT ON GRADIENT */
.page-hero,
.about-hero,
.hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

.page-hero *,
.about-hero *,
.hero-section * {
    color: #ffffff !important;
}

/* CTA sections - WHITE TEXT ON GRADIENT */
.cta-section,
.call-to-action {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

.cta-section *,
.call-to-action * {
    color: #ffffff !important;
}

/* DARK THEME - WHITE TEXT ON DARK BACKGROUNDS */
[data-theme="dark"] body {
    color: var(--text-primary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div:not(.page-hero):not(.about-hero):not(.hero-section),
[data-theme="dark"] li {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .component-selector {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .component-selector * {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] #clear-btn {
    color: var(--text-primary) !important;
    background: var(--surface) !important;
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .feature,
[data-theme="dark"] .contact-info,
[data-theme="dark"] .sidebar-widget {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .stat-card *,
[data-theme="dark"] .feature *,
[data-theme="dark"] .contact-info *,
[data-theme="dark"] .sidebar-widget * {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .footer {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .footer * {
    color: var(--text-primary) !important;
}

/* Dark theme gradient backgrounds - WHITE TEXT */
[data-theme="dark"] .page-hero,
[data-theme="dark"] .about-hero,
[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .page-hero *,
[data-theme="dark"] .about-hero *,
[data-theme="dark"] .hero-section * {
    color: #ffffff !important;
}

/* Theme toggle */
.theme-toggle,
.nav__toggle {
    color: var(--text-primary) !important;
}

/* Accessibility */
*:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

::selection {
    background: rgba(37, 99, 235, 0.2) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] ::selection {
    background: rgba(96, 165, 250, 0.3) !important;
    color: var(--text-primary) !important;
}/
* AGGRESSIVE FIX FOR SPECIFIC GRADIENT CARDS AND CTA SECTIONS */

/* Force white text on blue-green gradient cards */
div[style*="linear-gradient(135deg, #2563eb"],
div[style*="linear-gradient(135deg, #3b82f6"],
div[style*="linear-gradient(135deg, rgb(37, 99, 235)"],
div[style*="linear-gradient(135deg, rgb(59, 130, 246)"],
div[style*="background: linear-gradient"],
div[style*="background:linear-gradient"] {
    color: #ffffff !important;
}

div[style*="linear-gradient(135deg, #2563eb"] *,
div[style*="linear-gradient(135deg, #3b82f6"] *,
div[style*="linear-gradient(135deg, rgb(37, 99, 235)"] *,
div[style*="linear-gradient(135deg, rgb(59, 130, 246)"] *,
div[style*="background: linear-gradient"] *,
div[style*="background:linear-gradient"] * {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 3px 6px rgba(0,0,0,0.8) !important;
    font-size: 1.5rem !important;
}

/* Target any element with blue background */
*[style*="background-color: #2563eb"],
*[style*="background-color:#2563eb"],
*[style*="background: #2563eb"],
*[style*="background:#2563eb"],
*[style*="background-color: #3b82f6"],
*[style*="background-color:#3b82f6"],
*[style*="background: #3b82f6"],
*[style*="background:#3b82f6"] {
    color: #ffffff !important;
}

*[style*="background-color: #2563eb"] *,
*[style*="background-color:#2563eb"] *,
*[style*="background: #2563eb"] *,
*[style*="background:#2563eb"] *,
*[style*="background-color: #3b82f6"] *,
*[style*="background-color:#3b82f6"] *,
*[style*="background: #3b82f6"] *,
*[style*="background:#3b82f6"] * {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important;
}

/* Specific targeting for CTA sections */
.cta-section,
.call-to-action,
.hero-cta,
.ready-section,
.analyze-section {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}

.cta-section *,
.call-to-action *,
.hero-cta *,
.ready-section *,
.analyze-section * {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
}

.cta-section h1,
.cta-section h2,
.cta-section h3,
.call-to-action h1,
.call-to-action h2,
.call-to-action h3,
.hero-cta h1,
.hero-cta h2,
.hero-cta h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 3px 6px rgba(0,0,0,0.5) !important;
}

.cta-section p,
.call-to-action p,
.hero-cta p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Target component cards by class if they exist */
.component-card,
.hardware-card,
.system-card,
.bottleneck-card {
    color: #ffffff !important;
}

.component-card *,
.hardware-card *,
.system-card *,
.bottleneck-card * {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 3px 6px rgba(0,0,0,0.8) !important;
}

/* Target by grid position */
.grid-item,
.card-item,
.component-item {
    color: inherit;
}

/* But override if they have gradient backgrounds */
.grid-item[style*="gradient"],
.card-item[style*="gradient"],
.component-item[style*="gradient"] {
    color: #ffffff !important;
}

.grid-item[style*="gradient"] *,
.card-item[style*="gradient"] *,
.component-item[style*="gradient"] * {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 3px 6px rgba(0,0,0,0.8) !important;
}

/* Emergency override for any blue background */
*[class*="blue"],
*[class*="gradient"],
*[class*="primary"] {
    color: inherit;
}

*[class*="blue"][style],
*[class*="gradient"][style],
*[class*="primary"][style] {
    color: #ffffff !important;
}

*[class*="blue"][style] *,
*[class*="gradient"][style] *,
*[class*="primary"][style] * {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 3px 6px rgba(0,0,0,0.8) !important;
}

/* Dark theme compatibility */
[data-theme="dark"] .cta-section,
[data-theme="dark"] .call-to-action,
[data-theme="dark"] .hero-cta {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .cta-section *,
[data-theme="dark"] .call-to-action *,
[data-theme="dark"] .hero-cta * {
    color: #ffffff !important;
}