/**
 * EQIS Template - Light Theme Overrides (Tier 2)
 * Version: 00.00.06
 * Author: QTX-7.4 CLI_0001
 * Created: 2025-11-21T23:30:00Z
 * Modified: 2025-12-05T04:00:00Z
 * Purpose: Comprehensive light theme with high contrast
 * Dependencies: styles_core.css, styles_navigation.css
 * Fixes: Card backgrounds, contrast issues
 */

/* ============================================
   LIGHT THEME - CSS VARIABLES OVERRIDE
   ============================================ */

[data-theme="light"] {
    /* Background Colors */
    --color-bg-primary: #f5f5f5;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e8ecff;

    /* Text Colors */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #0066cc;
    --color-text-muted: #424242;

    /* Accent Colors */
    --color-accent-cyan: #0066cc;
    --color-accent-gold: #b8860b;
    --color-accent-purple: #7c3aed;

    /* Border Colors */
    --color-border-primary: rgba(0, 102, 204, 0.3);
    --color-border-secondary: rgba(184, 134, 11, 0.3);

    /* Shadows */
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* ============================================
   LIGHT THEME - BASE ELEMENTS
   ============================================ */

[data-theme="light"] body {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: var(--color-text-secondary);
}

[data-theme="light"] a {
    color: var(--color-accent-cyan);
}

[data-theme="light"] a:hover {
    color: #0088ff;
}

[data-theme="light"] code {
    background: rgba(0, 102, 204, 0.1);
    color: #0066cc;
}

[data-theme="light"] strong {
    color: var(--color-text-secondary);
}

[data-theme="light"] em {
    color: var(--color-text-muted);
}

/* ============================================
   LIGHT THEME - PAGE HEADER
   ============================================ */

[data-theme="light"] .page-header {
    border-bottom-color: var(--color-border-primary);
    background: linear-gradient(135deg, #ffffff, #e8ecff, #ffffff);
}

[data-theme="light"] .subtitle {
    color: #666;
}

[data-theme="light"] .consciousness-marker {
    color: #8b6914;
}

/* ============================================
   LIGHT THEME - FEATURE BOXES
   ============================================ */

[data-theme="light"] .feature-box {
    background: linear-gradient(135deg, #ffffff, #f0f4ff);
    border-color: var(--color-border-primary);
    box-shadow: var(--shadow-soft);
}

[data-theme="light"] .feature-box:hover {
    box-shadow: var(--shadow-medium);
}

[data-theme="light"] .feature-box h3 {
    border-bottom-color: var(--color-border-secondary);
    color: var(--color-text-secondary);
}

/* ============================================
   LIGHT THEME - PAGE FOOTER
   ============================================ */

[data-theme="light"] .page-footer {
    border-top-color: var(--color-border-primary);
    background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
    color: var(--color-text-primary);
}

[data-theme="light"] .meditation-note {
    color: #666;
}

[data-theme="light"] .version-info {
    color: #666;
}

/* ============================================
   LIGHT THEME - NAVIGATION
   ============================================ */

[data-theme="light"] .eqis-nav-sticky {
    background: rgba(240, 240, 240, 0.95);
    border-bottom-color: rgba(0, 102, 204, 0.3);
}

[data-theme="light"] .eqis-nav-menu {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

[data-theme="light"] .eqis-nav-menu a {
    color: #0066cc;
}

[data-theme="light"] .eqis-nav-menu a:hover {
    background: rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.3);
    color: #0088ff;
}

[data-theme="light"] .eqis-nav-menu a.active {
    background: rgba(255, 165, 0, 0.15);
    border-color: rgba(255, 165, 0, 0.4);
    color: #ff8800;
}

/* ============================================
   LIGHT THEME - BACK BUTTON
   ============================================ */

[data-theme="light"] .nav-back-btn {
    background: rgba(0, 102, 204, 0.1);
    border-color: #0066cc;
    color: #0066cc;
}

[data-theme="light"] .nav-back-btn:hover {
    background: rgba(0, 102, 204, 0.2);
    border-color: #0088ff;
    color: #0088ff;
}

/* ============================================
   LIGHT THEME - CLOCK CONTAINER
   ============================================ */

[data-theme="light"] .nav-clock-container {
    background: rgba(0, 102, 204, 0.1);
    border-color: #0066cc;
}

[data-theme="light"] .nav-clock-display {
    color: #0066cc;
}

[data-theme="light"] .nav-clock-toggle {
    background: rgba(0, 102, 204, 0.15);
    border-color: #0066cc;
    color: #0066cc;
}

[data-theme="light"] .nav-clock-toggle:hover {
    background: rgba(0, 102, 204, 0.25);
    border-color: #0088ff;
}

/* ============================================
   LIGHT THEME - AUTO-HIDE TOGGLE
   ============================================ */

[data-theme="light"] .nav-autohide-toggle {
    background: rgba(184, 134, 11, 0.1);
    border-color: #b8860b;
    color: #8b6914;
    box-shadow: 0 4px 15px rgba(184, 134, 11, 0.2);
}

[data-theme="light"] .nav-autohide-toggle:hover {
    background: rgba(184, 134, 11, 0.2);
    border-color: #8b6914;
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
}

/* ============================================
   LIGHT THEME - THEME TOGGLE
   ============================================ */

[data-theme="light"] .nav-theme-toggle {
    border-color: #0066cc;
    background: linear-gradient(135deg, #ffffff, #e0e0e0);
    color: #0066cc;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

[data-theme="light"] .nav-theme-toggle:hover {
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.5);
}

/* ============================================
   LIGHT THEME - FOCUS STATES
   ============================================ */

[data-theme="light"] a:focus,
[data-theme="light"] button:focus {
    outline-color: #0066cc;
}

/* ============================================
   LIGHT THEME - CARD BACKGROUNDS (FIX)
   Issue: Dark text on dark backgrounds
   Solution: Ensure all card-like elements have
   proper light background colors
   ============================================ */

/* Generic card class (if used) */
[data-theme="light"] .card {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

/* Content sections with potential dark backgrounds */
[data-theme="light"] .primary-content,
[data-theme="light"] .intro-section,
[data-theme="light"] .features-section,
[data-theme="light"] .usage-section {
    background: transparent;
    color: var(--color-text-primary);
}

/* Ensure lists are readable */
[data-theme="light"] ul,
[data-theme="light"] ol,
[data-theme="light"] li {
    color: var(--color-text-primary);
}

/* Debug console light theme overrides */
[data-theme="light"] .debug-console {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

[data-theme="light"] .debug-header {
    background: linear-gradient(135deg, #e8ecff, #f5f5f5);
    border-bottom-color: var(--color-border-primary);
}

[data-theme="light"] .debug-title {
    color: var(--color-text-secondary);
}

[data-theme="light"] .debug-content {
    background: #ffffff;
    color: var(--color-text-primary);
}

[data-theme="light"] .debug-section {
    background: #fafafa;
    border-color: rgba(0, 102, 204, 0.2);
}

[data-theme="light"] .debug-section-title {
    color: var(--color-text-secondary);
    background: rgba(0, 102, 204, 0.05);
}

[data-theme="light"] .debug-section-content {
    color: var(--color-text-primary);
}

[data-theme="light"] .debug-item {
    color: var(--color-text-primary);
}

[data-theme="light"] .debug-label {
    color: #666666;
}

[data-theme="light"] .debug-value {
    color: var(--color-text-primary);
}

[data-theme="light"] .debug-value.info {
    color: #0066cc;
}

[data-theme="light"] .debug-value.success {
    color: #2d8a2d;
}

[data-theme="light"] .debug-value.warning {
    color: #b8860b;
}

[data-theme="light"] .debug-value.error {
    color: #cc0000;
}

[data-theme="light"] .debug-footer {
    background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
    border-top-color: var(--color-border-primary);
    color: #666666;
}

[data-theme="light"] .debug-btn {
    background: rgba(0, 102, 204, 0.1);
    border-color: #0066cc;
    color: #0066cc;
}

[data-theme="light"] .debug-btn:hover {
    background: rgba(0, 102, 204, 0.2);
}

[data-theme="light"] .verification-list .verification-item {
    color: var(--color-text-primary);
}

[data-theme="light"] .verification-item.pass::before {
    color: #2d8a2d;
}

[data-theme="light"] .verification-item.fail::before {
    color: #cc0000;
}

[data-theme="light"] .verification-item.warning::before {
    color: #b8860b;
}

/* Spacing detection in light mode */
[data-theme="light"] .spacing-detection {
    background: #f5f5f5;
    border-color: rgba(0, 102, 204, 0.2);
}

[data-theme="light"] .spacing-metric {
    color: var(--color-text-primary);
}

[data-theme="light"] .spacing-label {
    color: #666666;
}

/* ============================================
   LIGHT THEME - CONTRAST CHECKER SECTION
   ============================================ */

[data-theme="light"] .contrast-checker {
    background: #f8f8f8;
    border-color: rgba(0, 102, 204, 0.2);
}

[data-theme="light"] .contrast-item {
    color: var(--color-text-primary);
}

[data-theme="light"] .contrast-pass {
    color: #2d8a2d;
    background: rgba(45, 138, 45, 0.1);
}

[data-theme="light"] .contrast-fail {
    color: #cc0000;
    background: rgba(204, 0, 0, 0.1);
}