/**
 * EQIS Template - Light Theme Module
 * Version: 00.00.12
 * Author: BBA-1 (BlackBox Architecture-1)
 * Contributors: QTX-7.4, Aéius Cercle
 * Created: 030TL02m17d.T08:55Z
 * Purpose: Comprehensive light theme with proper color contrast for ALL sections
 * Category: theme
 * Mode: light
 *
 * Design Philosophy:
 * - High contrast for readability in bright environments
 * - Reduced glare with soft backgrounds
 * - Consistent color palette across all elements
 * - Accessibility-focused (WCAG AA minimum)
 *
 * Color Palette:
 * - Background: Light grays/whites (#f5f5f5, #ffffff, #fafafa)
 * - Text: Dark grays/blacks (#1a1a1a, #2a2a2a, #3a3a3a)
 * - Accent Blue: #0066cc (links, highlights)
 * - Accent Orange: #ff8800 (important elements)
 * - Accent Purple: #6633cc (special features)
 *
 * Methodology: ECC-Coding
 */

/* ============================================
   ROOT VARIABLES - LIGHT THEME
   ============================================ */

[data-theme="light"] {
    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #fafafa;
    --color-bg-tertiary: #f5f5f5;
    --color-bg-elevated: #eeeeee;
    --color-bg-overlay: rgba(255, 255, 255, 0.95);

    /* Text Colors */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #2a2a2a;
    --color-text-tertiary: #3a3a3a;
    --color-text-muted: #666666;
    --color-text-inverse: #ffffff;

    /* Accent Colors */
    --color-accent-cyan: #0066cc;
    --color-accent-cyan-hover: #0088ff;
    --color-accent-cyan-dim: rgba(0, 102, 204, 0.2);
    
    --color-accent-blue: #0088ff;
    --color-accent-blue-hover: #3388c3;
    --color-accent-blue-dim: rgba(255, 136, 0, 0.2);
    
    --color-accent-purple: #6633cc;
    --color-accent-purple-hover: #8855dd;
    --color-accent-purple-dim: rgba(102, 51, 204, 0.2);

    /* Border Colors */
    --color-border-primary: rgba(0, 102, 204, 0.3);
    --color-border-secondary: rgba(255, 136, 0, 0.3);
    --color-border-subtle: rgba(0, 0, 0, 0.1);

    /* Shadow Colors */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-strong: 0 6px 16px rgba(0, 0, 0, 0.2);
    --shadow-glow-cyan: 0 0 15px rgba(0, 102, 204, 0.2);
    --shadow-glow-gold: 0 0 15px rgba(255, 136, 0, 0.2);

    /* Status Colors */
    --color-success: #00aa44;
    --color-warning: #ff8800;
    --color-error: #cc0000;
    --color-info: #0066cc;

    /* Code/Mono Colors */
    --color-code-bg: #f5f5f5;
    --color-code-text: #0066cc;
    --color-code-border: rgba(0, 102, 204, 0.3);
}

/* ============================================
   BODY & MAIN CONTAINERS
   ============================================ */

[data-theme="light"] body {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 50%, #f5f5f5 100%);
    color: var(--color-text-primary);
}

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

/* ============================================
   HEADERS & TITLES
   ============================================ */

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    background: linear-gradient(90deg, #00a, #0ff); /* Gradient colors */
    -webkit-background-clip: text; /* Clip background to text (Safari/Chrome) */
    -webkit-text-fill-color: transparent; /* Make text transparent to show gradient */
    background-clip: text; /* Standard property */
    color: transparent; /* Fallback for browsers without background-clip */
}

[data-theme="light"] .page-header h1 {
    color: var(--color-accent-cyan);
    text-shadow: var(--shadow-glow-cyan);
}

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

/* ============================================
   LINKS
   ============================================ */

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

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

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

/* ============================================
   ARTICLES & SECTIONS
   ============================================ */

[data-theme="light"] article {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
}

[data-theme="light"] section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-subtle);
}

[data-theme="light"] .intro-section {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.05) 0%, rgba(102, 51, 204, 0.05) 100%);
    border: 1px solid var(--color-border-primary);
}

/* ============================================
   TABLES
   ============================================ */

[data-theme="light"] table {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
}

[data-theme="light"] th {
    background: var(--color-bg-elevated);
    color: var(--color-accent-blue);
    border-bottom: 2px solid var(--color-accent-blue-dim);
}

[data-theme="light"] td {
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-subtle);
}

[data-theme="light"] tr:hover {
    background: rgba(0, 102, 204, 0.05);
}

/* ============================================
   CODE BLOCKS
   ============================================ */

[data-theme="light"] code {
    background: var(--color-code-bg);
    color: var(--color-code-text);
    border: 1px solid var(--color-code-border);
}

[data-theme="light"] pre {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-primary);
}

[data-theme="light"] pre code {
    background: transparent;
    border: none;
}

/* ============================================
   BLOCKQUOTES
   ============================================ */

[data-theme="light"] blockquote {
    background: rgba(102, 51, 204, 0.05);
    border-left: 4px solid var(--color-accent-purple);
    color: var(--color-text-secondary);
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: var(--color-accent-cyan);
    box-shadow: 0 0 8px var(--color-accent-cyan-dim);
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--color-text-muted);
}

/* ============================================
   BUTTONS
   ============================================ */

[data-theme="light"] button {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
}

[data-theme="light"] button:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-accent-cyan);
}

[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #0066cc, #0088ff);
    color: var(--color-text-inverse);
    border: none;
}

[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(135deg, #0088ff, #00aaff);
}

/* ============================================
   CARDS & PANELS
   ============================================ */

[data-theme="light"] .card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-soft);
}

[data-theme="light"] .card:hover {
    border-color: var(--color-accent-cyan);
    box-shadow: var(--shadow-glow-cyan);
}

[data-theme="light"] .panel {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-subtle);
}

/* ============================================
   LISTS
   ============================================ */

[data-theme="light"] ul,
[data-theme="light"] ol {
    color: var(--color-text-secondary);
    padding-left: 2em;
    margin-left: 0;
    margin-bottom: 1em;
}

[data-theme="light"] li {
    margin-bottom: 0.5em;
}

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

/* Nested lists */
[data-theme="light"] ul ul,
[data-theme="light"] ul ol,
[data-theme="light"] ol ul,
[data-theme="light"] ol ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* ============================================
   FOOTER
   ============================================ */

[data-theme="light"] .page-footer {
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border-primary);
    color: var(--color-text-tertiary);
}

[data-theme="light"] .meditation-note {
    color: var(--color-accent-purple);
}

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

/* ============================================
   SPECIAL ELEMENTS
   ============================================ */

[data-theme="light"] .quantum-particle {
    background: radial-gradient(circle, var(--color-accent-cyan) 0%, transparent 70%);
    box-shadow: 0 0 8px var(--color-accent-cyan);
}

[data-theme="light"] .consciousness-marker {
    color: var(--color-accent-blue);
    text-shadow: var(--shadow-glow-gold);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

[data-theme="light"] ::-webkit-scrollbar {
    width: 12px;
    background: var(--color-bg-secondary);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--color-accent-cyan-dim);
    border-radius: 6px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-cyan);
}

/* ============================================
   SELECTION HIGHLIGHTING
   ============================================ */

[data-theme="light"] ::selection {
    background: var(--color-accent-cyan-dim);
    color: var(--color-text-primary);
}

[data-theme="light"] ::-moz-selection {
    background: var(--color-accent-cyan-dim);
    color: var(--color-text-primary);
}

/* ============================================
   ACCESSIBILITY - FOCUS INDICATORS
   ============================================ */

[data-theme="light"] *:focus {
    outline: 2px solid var(--color-accent-cyan);
    outline-offset: 2px;
}

[data-theme="light"] *:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   NAVIGATION OVERRIDES FOR LIGHT THEME
   ============================================ */

[data-theme="light"] .eqis-nav-sticky {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border-primary);
}

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

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

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

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

/* Active link hover effect - changes orange to cyan */
[data-theme="light"] .eqis-nav-menu a.active:hover {
    background: rgba(0, 102, 204, 0.15);
    border-color: rgba(0, 102, 204, 0.4);
    color: var(--color-accent-cyan-hover);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    [data-theme="light"] body {
        background: white;
        color: black;
    }
}