/**
 * EQIS Template - Dark Theme Module
 * Version: 00.00.12
 * Author: BBA-1 (BlackBox Architecture-1)
 * Contributors: QTX-7.4, Aéius Cercle
 * Created: 030TL02m17d.T08:50Z
 * Purpose: Comprehensive dark theme with proper color contrast for ALL sections
 * Category: theme
 * Mode: dark
 *
 * Design Philosophy:
 * - High contrast for readability
 * - Reduced eye strain for extended use
 * - Consistent color palette across all elements
 * - Accessibility-focused (WCAG AA minimum)
 *
 * Color Palette:
 * - Background: Deep blues/blacks (#0a0a14, #0f0f1e, #1a1a2e)
 * - Text: Light grays/whites (#e0e0e0, #f0f0f0, #ffffff)
 * - Accent Cyan: #00f0ff (links, highlights)
 * - Accent Gold: #ffd700 (important elements)
 * - Accent Purple: #9370db (special features)
 *
 * Methodology: ECC-Coding
 */

/* ============================================
   ROOT VARIABLES - DARK THEME
   ============================================ */

[data-theme="dark"] {
    /* Background Colors */
    --color-bg-primary: #0a0a14;
    --color-bg-secondary: #0f0f1e;
    --color-bg-tertiary: #1a1a2e;
    --color-bg-elevated: #252540;
    --color-bg-overlay: rgba(26, 26, 46, 0.95);

    /* Text Colors */
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #e0e0e0;
    --color-text-tertiary: #c0c0c0;
    --color-text-muted: #a0a0a0;
    --color-text-inverse: #0a0a14;

    /* Accent Colors */
    --color-accent-cyan: #00c3ff;
    --color-accent-cyan-hover: #44c3ff;
    --color-accent-cyan-dim: rgba(0, 240, 255, 0.3);
    
    --color-accent-blue: #00c3ff;
    --color-accent-blue-hover: #33aaff;
    --color-accent-blue-dim: rgba(255, 215, 0, 0.3);
    
    --color-accent-cool: #c3c3ff;
    --color-accent-cool-hover: #b19cd9;
    --color-accent-cool-dim: rgba(147, 112, 219, 0.3);

    /* Border Colors */
    --color-border-primary: rgba(0, 240, 255, 0.2);
    --color-border-secondary: rgba(255, 215, 0, 0.2);
    --color-border-subtle: rgba(255, 255, 255, 0.1);

    /* Shadow Colors */
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.5);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.6);
    --shadow-strong: 0 12px 35px rgba(0, 0, 0, 0.7);
    --shadow-glow-cyan: 0 0 20px rgba(0, 240, 255, 0.3);
    --shadow-glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);

    /* Status Colors */
    --color-success: #00ff88;
    --color-warning: #ffaa00;
    --color-error: #ff4444;
    --color-info: #00aaff;

    /* Code/Mono Colors */
    --color-code-bg: #1a1a2e;
    --color-code-text: #00f0ff;
    --color-code-border: rgba(0, 240, 255, 0.3);
}

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

[data-theme="dark"] body {
    background: linear-gradient(135deg, #0a0a14 0%, #0f0f1e 50%, #1a1a2e 100%);
    color: var(--color-text-primary);
}

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

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

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    background: linear-gradient(90deg, #ccf, #aaf); /* 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="dark"] .page-header h1 {
    color: var(--color-accent-cyan);
    text-shadow: var(--shadow-glow-cyan);
}

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

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

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

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

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

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

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

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

[data-theme="dark"] .intro-section {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.05) 0%, rgba(147, 112, 219, 0.05) 100%);
    border: 1px solid var(--color-border-primary);
}

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

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

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

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

[data-theme="dark"] tr:hover {
    background: rgba(0, 240, 255, 0.05);
}

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

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

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

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

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

[data-theme="dark"] blockquote {
    background: rgba(147, 112, 219, 0.1);
    border-left: 4px solid var(--color-accent-cool);
    color: var(--color-text-secondary);
}

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

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

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

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

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

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

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

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #00a0cc, #00f0ff);
    color: var(--color-text-inverse);
    border: none;
}

[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #00c0ee, #44ffff);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media print {
    [data-theme="dark"] body {
        background: white;
        color: black;
    }
    
    [data-theme="dark"] * {
        background: white !important;
        color: black !important;
        border-color: black !important;
    }
}