/* themes.css — color themes for drkoduru.com (v12)
   Midnight = the original dark site. Daylight = the existing light theme.
   Sunrise and Lavender reuse every light-theme rule and only swap the color tokens. */

[data-theme="light"][data-palette="sunrise"] {
    --bg-primary: #fff7ef;
    --bg-secondary: #fdebdc;
    --bg-card: rgba(255, 252, 248, 0.94);
    --bg-glass: rgba(255, 248, 240, 0.78);
    --accent-cyan: #b23a0a;          /* 4.9:1 on the cream background */
    --accent-teal: #0f766e;
    --accent-blue: #a74a08;
    --accent-purple: #9d174d;
    --accent-gold: #b45309;
    --accent-pink: #be123c;
    --accent-orange: #c2410c;
    --text-primary: #2b1a12;
    --text-secondary: #5c4033;
    --text-muted: #7a5b4b;
    --border-subtle: rgba(194, 65, 12, 0.16);
    --glow-cyan: 0 2px 12px rgba(194, 65, 12, 0.16);
    --glow-teal: 0 2px 12px rgba(15, 118, 110, 0.16);
    --gradient-primary: linear-gradient(135deg, #c2410c, #b45309);
    --gradient-accent: linear-gradient(135deg, #9d174d, #c2410c);
    --gradient-warm: linear-gradient(135deg, #b45309, #c2410c);
}

[data-theme="light"][data-palette="lavender"] {
    --bg-primary: #f7f4ff;
    --bg-secondary: #ece6fb;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-glass: rgba(250, 248, 255, 0.78);
    --accent-cyan: #6d28d9;
    --accent-teal: #0f766e;
    --accent-blue: #4338ca;
    --accent-purple: #a21caf;
    --accent-gold: #b45309;
    --accent-pink: #be185d;
    --accent-orange: #c2410c;
    --text-primary: #1e1336;
    --text-secondary: #4c3d6b;
    --text-muted: #685a84;
    --border-subtle: rgba(109, 40, 217, 0.16);
    --glow-cyan: 0 2px 12px rgba(109, 40, 217, 0.16);
    --glow-teal: 0 2px 12px rgba(15, 118, 110, 0.16);
    --gradient-primary: linear-gradient(135deg, #6d28d9, #a21caf);
    --gradient-accent: linear-gradient(135deg, #a21caf, #be185d);
    --gradient-warm: linear-gradient(135deg, #b45309, #c2410c);
}

/* Daylight: the original light theme's cyan/teal (#0097a7 / #00897b) are ~3.5:1 on white — deepen for readable text */
html[data-theme="light"]:not([data-palette]) {
    --accent-cyan: #00737f;
    --accent-teal: #00695c;
    --accent-gold: #b45309;            /* was #f57f17 (~2.5:1) */
    --accent-orange: #c2410c;          /* was #e65100 */
    --text-muted: #56707d;             /* was #78909c (3.35:1) */
    --gradient-primary: linear-gradient(135deg, #00737f, #00695c);
    --gradient-warm: linear-gradient(135deg, #b45309, #c2410c);
}
html[data-theme="light"][data-palette="lavender"] { --text-muted: #5f5177; }

/* Remaining low-contrast items found by the audit (all themes where noted) */
/* Services step numbers sit on neon gradient circles: white digits were ~1.6:1. Midnight → dark digits;
   light themes → deep theme-colored circle with white digits. */
.process-num { color: #0a0e1a !important; -webkit-text-fill-color: #0a0e1a !important; }
html[data-theme="light"] .process-num {
    background: var(--gradient-primary) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html[data-theme="light"] .impact-ms-year { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; }
html[data-theme="light"] .contact-section button.btn,
html[data-theme="light"] .contact-form-wrap button.btn { background: var(--gradient-primary) !important; color: #fff !important; }
html[data-theme="light"] :is(.intl-capability-sub, .add-capability-sub, .ngs-modality-sub, .aiml-metric-lbl, .intl-metric-lbl, .gr-stat-lbl) {
    color: var(--text-secondary) !important;
}
html[data-theme="light"] .whats-new-card-type,
html[data-theme="light"] .pat-number { filter: none; color: var(--text-secondary) !important; }

/* ── Elements that hard-code neon colors: follow the active light theme's accent instead ──
   (html[...] adds specificity so these win over the page's own [data-theme="light"] rules) */
html[data-theme="light"] .floating-cta {
    background: var(--gradient-primary);
    color: #fff;                                   /* white on the deep accents: ≥ 4.5:1 */
    box-shadow: var(--glow-cyan);
    animation: none;                               /* the pulse is a cyan glow, out of place on light themes */
}
html[data-theme="light"] .floating-cta:hover { box-shadow: var(--glow-cyan), 0 0 0 4px var(--border-subtle); }
html[data-theme="light"] .hero-chips li {
    color: var(--accent-cyan);
    background: color-mix(in srgb, var(--accent-cyan) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-cyan) 28%, transparent);
}

/* Section titles flow cyan→teal→blue; in the palette themes "teal" is a contrasting green, so flow within the main hue */
html[data-palette] .section-title {
    background-image: linear-gradient(110deg, var(--accent-cyan) 0%, var(--accent-blue) 50%, var(--accent-cyan) 100%);
}

/* ── Services page: these sections hard-code dark navy backgrounds and had no light-theme rules
   (dark text on dark background in Daylight too). Alternate the theme's two background tones instead. ── */
html[data-theme="light"] .hero:not(#hero),
html[data-theme="light"] .process {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
}
html[data-theme="light"] .hero-section,
html[data-theme="light"] .contact-section { background: var(--bg-primary) !important; }
html[data-theme="light"] #cat-ai-ml.hero-section,
html[data-theme="light"] #cat-consulting.hero-section { background: var(--bg-secondary) !important; }
html[data-theme="light"] .contact-form-wrap { background: var(--bg-card) !important; border-color: var(--border-subtle) !important; }
html[data-theme="light"] .footer { background: var(--bg-secondary) !important; }
html[data-theme="light"] .svc-card,
html[data-theme="light"] .hero-cat-btn {
    background: var(--bg-card) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* ── Readable text on light themes (contrast audit: these used neon text colors meant for black backgrounds) ── */
/* Homepage */
html[data-theme="light"] .tech-detail { color: var(--text-muted) !important; }
html[data-theme="light"] .model-chip-acc { color: var(--text-primary) !important; }
html[data-theme="light"] .hp-badge,
html[data-theme="light"] .new-pulse-badge {
    color: #fff !important; background: var(--accent-cyan) !important; border-color: transparent !important;
}
html[data-theme="light"] #agentic-ai .section-header p,
html[data-theme="light"] #prediction-model .section-header p { color: var(--text-secondary) !important; }

/* Services page */
html[data-theme="light"] :is(.hero-tag, .cat-tag, .process-tag) { color: var(--accent-cyan) !important; }
html[data-theme="light"] :is(.hero-sub, .cat-desc, .process-sub, .process-step-desc, .hero-section p, .process p, .contact-section p, .svc-card p) {
    color: var(--text-secondary) !important;
}
html[data-theme="light"] :is(.svc-card h4, .hero-cat-label, .process-step-title, .process h2, .contact-section h2, .contact-section h3, .contact-section label) {
    color: var(--text-primary) !important;
}
html[data-theme="light"] .svc-card h4 { -webkit-text-fill-color: currentColor; }
html[data-theme="light"] .svc-tag {
    color: var(--accent-cyan) !important;
    background: color-mix(in srgb, var(--accent-cyan) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-cyan) 28%, transparent) !important;
}
html[data-theme="light"] :is(.aiml-metric-val, .ngs-metric-val, .add-metric-val, .intl-metric-val) {
    color: var(--accent-cyan) !important; -webkit-text-fill-color: var(--accent-cyan) !important;
}
html[data-theme="light"] :is(.hero-section, .process, .contact-section) a.btn:not(.btn-primary) {
    color: var(--accent-cyan) !important; border-color: var(--accent-cyan) !important;
}
html[data-theme="light"] .contact-chip { color: var(--text-secondary) !important; border-color: var(--border-subtle) !important; }
html[data-theme="light"] .glass-links a.active { color: var(--accent-cyan) !important; }

/* Services hero title: white→cyan gradient text (~1.1:1 on light backgrounds) → theme gradient */
html[data-theme="light"] .hero:not(#hero) h1 { background-image: var(--gradient-primary) !important; }   /* Services only — the homepage hero is #hero */
/* Services stat tiles: 30% black over a light page read as muddy boxes */
html[data-theme="light"] :is(.aiml-metric-box, .ngs-metric-box, .intl-metric-box, .add-metric-box) {
    background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important;
}

/* Floating Dr.K stamp / visitor badge (both pages): only where page margins have room for them */
@media (max-width: 1279px) { .drk-float, .visitor-badge { display: none !important; } }

/* ── Chart "data panels": the light theme keeps charts on dark cards (charts are drawn for dark backgrounds).
   Tint those cards in each palette's own deep tone so they read as part of the theme, not black boxes. ── */
html[data-palette="sunrise"] :is(.viz-dark-card, .iml-model-panel) { background: #2a1a14 !important; border-color: rgba(251, 146, 60, 0.22) !important; }
html[data-palette="lavender"] :is(.viz-dark-card, .iml-model-panel) { background: #1f1535 !important; border-color: rgba(167, 139, 250, 0.24) !important; }
html[data-palette="sunrise"] .viz-dark-card :is(.viz-card, .cm-panel, .pub-fig-card, .perf-metric-card, .pub-dash, .gene-radar-item, .psb-item) {
    background: rgba(255, 237, 213, 0.04) !important; border-color: rgba(251, 146, 60, 0.16) !important;
}
html[data-palette="lavender"] .viz-dark-card :is(.viz-card, .cm-panel, .pub-fig-card, .perf-metric-card, .pub-dash, .gene-radar-item, .psb-item) {
    background: rgba(237, 233, 254, 0.04) !important; border-color: rgba(167, 139, 250, 0.18) !important;
}

/* ── Theme picker (opened from the palette button in the nav) ── */
.theme-toggle .theme-icon-light, .theme-toggle .theme-icon-dark { display: none !important; }
.theme-toggle .theme-icon-palette { display: inline-block; }
.theme-menu {
    position: fixed; z-index: 2000; min-width: 210px;
    padding: 6px; border-radius: 14px;
    background: var(--bg-secondary); border: 1px solid var(--border-subtle);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
}
.theme-menu[hidden] { display: none; }
.theme-menu-title {
    font: 600 0.7rem "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); padding: 6px 10px 8px;
}
.theme-option {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
    font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--text-primary); text-align: left; cursor: pointer;
}
.theme-option:hover, .theme-option:focus-visible { background: var(--bg-card); outline: none; }
.theme-option:focus-visible { box-shadow: 0 0 0 2px var(--accent-cyan); }
.theme-swatch {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(127, 127, 127, 0.35);
    background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-accent) 50%);
}
.theme-option .theme-check { margin-left: auto; color: var(--accent-cyan); visibility: hidden; }
.theme-option[aria-checked="true"] .theme-check { visibility: visible; }

/* Capability / modality strips (Services): services.html's old light theme forced these dark (rgba(0,0,0,.25)),
   which reads as grey boxes with ~3.7:1 text on a light page. Light cards + themed accent instead. */
html[data-theme="light"] :is(.ngs-modality-card, .intl-capability-card, .add-capability-card) {
    background: var(--bg-card) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .ngs-modality-card.active { border-color: var(--accent-cyan) !important; }
html[data-theme="light"] :is(.ngs-modality-icon, .intl-capability-icon, .add-capability-icon) { color: var(--accent-cyan) !important; }
html[data-theme="light"] :is(.ngs-modality-name, .intl-capability-name, .add-capability-name) { color: var(--text-primary) !important; }