/**
 * light.css - Light Theme CSS
 * 
 * Contains all light theme specific styles (converted from :not(.dark) selectors).
 * These styles override variables and properties to define the light color scheme.
 * 
 * This file is loaded when light theme is active (default theme).
 */

/* ────────────────────────────────────────────────────────────────────────────
   LIGHT THEME SYNTAX HIGHLIGHTING
   ──────────────────────────────────────────────────────────────────────── */

html:not(.dark) .hl-comment { color: #6b7280; font-style: italic; }
html:not(.dark) .hl-string { color: #15803d; }
html:not(.dark) .hl-keyword { color: #1d4ed8; font-weight: bold; }
html:not(.dark) .hl-bash-var { color: #b91c1c; }
html:not(.dark) .hl-flag { color: #b45309; }
html:not(.dark) .hl-number { color: #0369a1; }
html:not(.dark) .hl-punctuation { color: #374151; }
html:not(.dark) .hl-json-key { color: #1d4ed8; font-weight: 600; }
html:not(.dark) .hl-yaml-key { color: #1d4ed8; font-weight: 600; }
html:not(.dark) .hl-yaml-anchor { color: #7c3aed; }
html:not(.dark) .hl-var { color: #7c3aed; font-weight: bold; }
html:not(.dark) .hl-operator { color: #0f766e; }
html:not(.dark) .hl-function { color: #7c2d12; font-weight: 600; }
html:not(.dark) .hl-property { color: #1e3a8a; }
html:not(.dark) .hl-decorator { color: #9333ea; }
html:not(.dark) .hl-macro { color: #9f1239; font-weight: 600; }
html:not(.dark) .hl-type { color: #0c4a6e; }
html:not(.dark) .hl-lifetime { color: #7c3aed; font-style: italic; }

/* ────────────────────────────────────────────────────────────────────────────
   LIGHT THEME MARKDOWN SYNTAX HIGHLIGHTING
   ──────────────────────────────────────────────────────────────────────────── */

html:not(.dark) .hl-md-h1 { color: #7c3aed; font-weight: bold; }
html:not(.dark) .hl-md-h2 { color: #1d4ed8; font-weight: bold; }
html:not(.dark) .hl-md-h3 { color: #047857; font-weight: bold; }
html:not(.dark) .hl-md-h4 { color: #b45309; font-weight: bold; }
html:not(.dark) .hl-md-h5, html:not(.dark) .hl-md-h6 { color: #374151; font-weight: bold; }
html:not(.dark) .hl-md-heading-1 { color: #4c1d95; }
html:not(.dark) .hl-md-heading-2 { color: #1e3a8a; }
html:not(.dark) .hl-md-heading-3 { color: #065f46; }
html:not(.dark) .hl-md-heading-4, html:not(.dark) .hl-md-heading-5, html:not(.dark) .hl-md-heading-6 { color: #1f2937; }
html:not(.dark) .hl-md-checkbox { font-weight: bold; vertical-align: middle; }
html:not(.dark) .hl-md-checkbox-unchecked { color: #6b7280; }
html:not(.dark) .hl-md-checkbox-checked { color: #0369a1; }
html:not(.dark) .hl-md-fm { color: #3f6212; font-style: italic; }
html:not(.dark) .hl-md-fence { color: #6d28d9; }
html:not(.dark) .hl-md-hr { color: #6b7280; }
html:not(.dark) .hl-md-bq-marker { color: #2563eb; font-weight: bold; }
html:not(.dark) .hl-md-bq { color: #4338ca; font-style: italic; }

/* Light theme blockquote nesting levels */
html:not(.dark) .hl-md-bq-level-1 .hl-md-bq-marker { color: #2563eb; }
html:not(.dark) .hl-md-bq-level-1 .hl-md-bq { color: #4338ca; }
html:not(.dark) .hl-md-bq-level-2 .hl-md-bq-marker { color: #0891b2; }
html:not(.dark) .hl-md-bq-level-2 .hl-md-bq { color: #0e7490; }
html:not(.dark) .hl-md-bq-level-3 .hl-md-bq-marker { color: #059669; }
html:not(.dark) .hl-md-bq-level-3 .hl-md-bq { color: #047857; }
html:not(.dark) .hl-md-bq-level-4 .hl-md-bq-marker { color: #7c3aed; }
html:not(.dark) .hl-md-bq-level-4 .hl-md-bq { color: #6d28d9; }
html:not(.dark) .hl-md-bq-level-5 .hl-md-bq-marker { color: #dc2626; }
html:not(.dark) .hl-md-bq-level-5 .hl-md-bq { color: #b91c1c; }

html:not(.dark) .hl-md-list-marker { color: #d97706; font-weight: bold; }
html:not(.dark) .hl-md-bold { color: #92400e; font-weight: bold; }
html:not(.dark) .hl-md-italic { color: #065f46; font-style: italic; }
html:not(.dark) .hl-md-code { color: #b91c1c; }
html:not(.dark) .hl-md-link, html:not(.dark) .hl-md-link-text { color: #0369a1; }
html:not(.dark) .hl-md-link-url { color: #0891b2; }
html:not(.dark) .hl-md-image { color: #7c3aed; }
html:not(.dark) .hl-md-html { color: #9a3412; }

/* ────────────────────────────────────────────────────────────────────────────
   LIGHT THEME CODE BLOCK SCROLLBAR
   ──────────────────────────────────────────────────────────────────────────── */

.prose pre {
    scrollbar-color: rgba(79, 70, 229, 0.3) rgba(240, 244, 255, 0.5);
}

.prose pre::-webkit-scrollbar-track {
    background: rgba(240, 244, 255, 0.5);
}

.prose pre::-webkit-scrollbar-thumb {
    background: rgba(79, 70, 229, 0.3);
}

.prose pre::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 70, 229, 0.5);
}

/* ────────────────────────────────────────────────────────────────────────────
   LIGHT THEME CSV HIGHLIGHTING
   ──────────────────────────────────────────────────────────────────────────── */

html:not(.dark) .csv-col-0  { color: #4f46e5; }
html:not(.dark) .csv-col-1  { color: #0891b2; }
html:not(.dark) .csv-col-2  { color: #16a34a; }
html:not(.dark) .csv-col-3  { color: #b45309; }
html:not(.dark) .csv-col-4  { color: #be123c; }
html:not(.dark) .csv-col-5  { color: #7c3aed; }
html:not(.dark) .csv-col-6  { color: #0369a1; }
html:not(.dark) .csv-col-7  { color: #065f46; }
html:not(.dark) .csv-col-8  { color: #92400e; }
html:not(.dark) .csv-col-9  { color: #9f1239; }
html:not(.dark) .csv-col-10 { color: #6d28d9; }
html:not(.dark) .csv-col-11 { color: #0e7490; }
html:not(.dark) .csv-col-12 { color: #15803d; }
html:not(.dark) .csv-col-13 { color: #b45309; }
html:not(.dark) .csv-col-14 { color: #db2777; }
html:not(.dark) .csv-col-15 { color: #1d4ed8; }

/* ────────────────────────────────────────────────────────────────────────────
   LIGHT THEME COMPONENT OVERRIDES
   ──────────────────────────────────────────────────────────────────────────── */

.theme-toggle:hover {
    background-color: var(--c-slate-100);
}

.card:hover .card-title { color: var(--c-blue-600); }

.card-footer { color: var(--c-blue-600); }

.hero-promo { color: var(--c-blue-600); }

.back-link { color: var(--c-blue-600); }

.back-link:hover {
    background-color: var(--c-blue-50);
}

.nav-item:hover { 
    background-color: var(--c-slate-100);
}

.group-toggle:hover {
    background-color: var(--c-slate-100);
}

.badge { background-color: var(--c-blue-100); color: var(--c-blue-700); }

.tag { background-color: var(--c-slate-100); color: var(--c-slate-600); }

.var-panel {
    background-color: var(--c-blue-50);
    border-color: var(--c-blue-200);
}

.panel-toggle { color: var(--c-blue-600); }

.panel-clear-btn:hover { 
    background: var(--c-slate-200); 
    color: var(--c-blue-600); 
}

.checkbox-label:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

input[type="checkbox"] {
    border-color: #d1d5db;
    background-color: #ffffff;
}

input[type="checkbox"]:hover:not(:checked) {
    border-color: #9ca3af;
}

.prose a {
    color: var(--c-blue-600);
    text-decoration-color: var(--c-blue-400);
}

.prose a:hover {
    color: var(--c-blue-700);
    text-decoration-color: var(--c-blue-600);
}

.prose blockquote {
    color: #374151;
    border-left-color: #6366f1;
    background: #eef2ff;
    padding: 0.4rem 0.75rem 0.4rem 1rem;
    border-radius: 0 0.25rem 0.25rem 0;
    box-shadow: none;
}

.prose blockquote::before {
    color: #6366f1;
    opacity: 0.4;
    font-size: 1.4rem;
    top: 0.1rem;
    left: 0.25rem;
}

.var-highlight {
    background: var(--c-blue-100);
    color: var(--c-blue-800);
}

.info-button:hover {
    background: var(--c-slate-200);
    color: var(--c-blue-600);
}

.hints-close-btn:hover {
    background: var(--c-slate-200);
}