/* Egyptian templates — light/dark theme tokens (load after base + variant CSS) */

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* ── Light mode (explicit reset) ── */
html[data-theme="light"] .egyptian-site {
    --bg: #ffffff;
    --surface: #f8fafc;
    --card: #ffffff;
    --nav-bg: #ffffff;
    --nav-text: #0f172a;
    --nav-link: #64748b;
    --nav-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    --hero-bg: #ffffff;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--card));
    --shadow: rgba(15, 23, 42, 0.08);
    --footer-bg: var(--surface);
    --input-bg: var(--card);
}

/* ── Dark mode (global) ── */
html[data-theme="dark"] .egyptian-site {
    --bg: #0f172a;
    --surface: #1e293b;
    --card: #1e293b;
    --nav-bg: rgba(30, 41, 59, 0.96);
    --nav-text: #f1f5f9;
    --nav-link: #cbd5e1;
    --nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    --hero-bg: #0f172a;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: rgba(148, 163, 184, 0.22);
    --primary-soft: color-mix(in srgb, var(--primary) 18%, transparent);
    --shadow: rgba(0, 0, 0, 0.3);
    --footer-bg: #0b1220;
    --input-bg: var(--surface);
    background: var(--bg);
    color: var(--text);
}

/* ── Card / surface components use tokens ── */
.eg-btn-outline { background: var(--card); }
.eg-course-card,
.eg-price-card,
.eg-faq-item,
.eg-feature-item,
.eg-honor-card { background: var(--card); }

html[data-theme="dark"] .eg-btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .eg-btn-outline:hover {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
}

html[data-theme="dark"] .eg-section { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .eg-section-head h2 { color: var(--text); }
html[data-theme="dark"] .eg-section-head p { color: var(--text-muted); }
html[data-theme="dark"] .eg-stats-bar { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .eg-footer-rich { background: var(--footer-bg); color: var(--text); }
html[data-theme="dark"] .eg-footer-links a,
html[data-theme="dark"] .eg-footer-contact li { color: var(--text-muted); }
html[data-theme="dark"] .eg-footer-bottom { background: color-mix(in srgb, var(--bg) 90%, #000); }
html[data-theme="dark"] .eg-badge { background: var(--primary-soft); color: var(--primary); }
html[data-theme="dark"] .eg-feature-item p,
html[data-theme="dark"] .eg-course-card p,
html[data-theme="dark"] .eg-price-card p { color: var(--text-muted); }
html[data-theme="dark"] .eg-feature-item:hover,
html[data-theme="dark"] .eg-course-card:hover,
html[data-theme="dark"] .eg-price-card:hover,
html[data-theme="dark"] .eg-honor-card:hover { box-shadow: 0 16px 40px var(--shadow); }
html[data-theme="dark"] .v-showcase-card { background: var(--card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .v-arabic-branch { background: var(--card); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
html[data-theme="dark"] .v-eng-skill { background: var(--card); }

/* ── Physics · abdulmaaboud ── */
html[data-theme="light"] .egyptian-site[data-variant="abdulmaaboud"] {
    --bg: color-mix(in srgb, var(--primary) 5%, #ffffff);
    --surface: color-mix(in srgb, var(--primary) 10%, #ffffff);
    --hero-bg: color-mix(in srgb, var(--primary) 7%, #ffffff);
}
html[data-theme="dark"] .egyptian-site[data-variant="abdulmaaboud"] {
    --bg: color-mix(in srgb, var(--primary) 8%, #0f172a);
    --surface: color-mix(in srgb, var(--primary) 12%, #1e293b);
    --hero-bg: color-mix(in srgb, var(--primary) 10%, #0f172a);
}
html[data-theme="light"] .egyptian-site[data-variant="abdulmaaboud"] .eg-badge {
    background: color-mix(in srgb, var(--primary) 12%, var(--card));
    color: var(--primary);
}
html[data-theme="dark"] .egyptian-site[data-variant="abdulmaaboud"] .eg-badge {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: color-mix(in srgb, var(--accent) 75%, #fff);
}
html[data-theme="light"] .egyptian-site[data-variant="abdulmaaboud"] .v-hero-float-stat {
    background: var(--card);
    color: var(--text);
}
html[data-theme="light"] .egyptian-site[data-variant="abdulmaaboud"] .v-hero-float-stat small {
    color: var(--text-muted);
}
html[data-theme="dark"] .egyptian-site[data-variant="abdulmaaboud"] .v-hero-float-stat {
    background: var(--card);
    color: var(--text);
}
html[data-theme="dark"] .egyptian-site[data-variant="abdulmaaboud"] .v-faq-card {
    background: color-mix(in srgb, var(--card) 80%, transparent);
}

/* ── Biology · magacademy ── */
html[data-theme="light"] .egyptian-site[data-variant="magacademy"] {
    --surface: var(--surface-tint);
}
html[data-theme="dark"] .egyptian-site[data-variant="magacademy"] {
    --surface: var(--surface-tint);
}
html[data-theme="dark"] .egyptian-site[data-variant="magacademy"] .eg-nav-links a {
    background: var(--card);
    border-color: var(--border);
    color: var(--nav-link);
}
html[data-theme="dark"] .egyptian-site[data-variant="magacademy"] .eg-feature-card {
    background: var(--card);
}

/* ── English · oxford ── */
html[data-theme="light"] .egyptian-site[data-variant="oxford"] {
    --surface: var(--surface-tint);
}
html[data-theme="dark"] .egyptian-site[data-variant="oxford"] {
    --surface: var(--surface-tint);
}
html[data-theme="dark"] .v-hero-oxford { background: var(--hero-gradient); }
html[data-theme="dark"] .v-oxford-lines {
    background: repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255,255,255,.04) 79px, rgba(255,255,255,.04) 80px);
}
html[data-theme="dark"] .v-oxford-metrics span,
html[data-theme="dark"] .v-oxford-faq-a { color: var(--text-muted); }
html[data-theme="dark"] .v-oxford-card { background: var(--card); color: var(--text); }
html[data-theme="dark"] .v-faq-oxford { background: var(--bg); }
html[data-theme="dark"] .v-oxford-faq-table,
html[data-theme="dark"] .v-oxford-faq-row { border-color: var(--border); }
html[data-theme="dark"] .v-oxford-course-list,
html[data-theme="dark"] .v-oxford-course-item { border-color: var(--border); background: var(--card); }
html[data-theme="dark"] .v-oxford-course-item:hover { background: var(--surface); }

/* ── Arabic · andalus ── */
html[data-theme="light"] .egyptian-site[data-variant="andalus"] {
    --surface: var(--surface-tint);
}
html[data-theme="dark"] .egyptian-site[data-variant="andalus"] {
    --surface: var(--surface-tint);
}
html[data-theme="dark"] .v-hero-andalus { background: var(--hero-gradient); }
html[data-theme="dark"] .v-andalus-frame {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, #422006), color-mix(in srgb, var(--secondary) 20%, #1c1410));
}
html[data-theme="dark"] .v-faq-andalus {
    background: linear-gradient(180deg, var(--bg), var(--surface));
}
html[data-theme="dark"] .v-andalus-faq-tile,
html[data-theme="dark"] .v-andalus-honor-card {
    background: var(--card);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    color: var(--text);
}
html[data-theme="light"] .egyptian-site[data-variant="andalus"] .eg-hero {
    background: var(--hero-gradient);
}

/* ── Chemistry · khaledsakr (hero stays branded; sections follow theme) ── */
html[data-theme="dark"] .egyptian-site[data-variant="khaledsakr"] {
    --bg: #0f172a;
    --surface: #1e293b;
    --card: #1e293b;
}
html[data-theme="dark"] .v-faq-khaled {
    background: color-mix(in srgb, var(--primary) 12%, var(--bg));
}
html[data-theme="dark"] .v-faq-details,
html[data-theme="dark"] .v-khaled-course {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] .v-faq-answer { color: var(--text-muted); }
html[data-theme="dark"] .v-khaled-course-body h3 { color: var(--text); }

/* ── Magacademy variant blocks ── */
.v-hero-mag { background: var(--hero-gradient); }
.v-mag-shell,
.v-mag-faq-item,
.v-mag-course { background: var(--card); border-color: var(--border); color: var(--text); }
.v-mag-pill { border-color: var(--border); color: var(--text-muted); }
.v-mag-pill.active,
.v-mag-pill:hover { background: var(--primary-soft); }
html[data-theme="dark"] .v-mag-badge {
    background: color-mix(in srgb, var(--primary) 20%, var(--surface)) !important;
    color: var(--primary) !important;
}

/* ── Khaled FAQ / courses light uses tokens ── */
.v-faq-details,
.v-khaled-course { background: var(--card); color: var(--text); }
.v-faq-answer,
.v-chem-showcase-sub { color: var(--text-muted); }
.v-faq-khaled { background: color-mix(in srgb, var(--primary) 6%, var(--bg)); }

/* ── Oxford variant blocks ── */
.v-hero-oxford { background: var(--hero-gradient-alt); }
.v-oxford-metrics span,
.v-oxford-faq-a { color: var(--text-muted); }
.v-oxford-card { background: var(--card); }
.v-faq-oxford { background: var(--bg); }
.v-oxford-faq-table,
.v-oxford-faq-row,
.v-oxford-course-list,
.v-oxford-course-item { border-color: var(--border); }
.v-oxford-course-item { background: var(--card); }

/* ── Andalus variant blocks ── */
.v-hero-andalus { background: var(--hero-gradient-alt); }
.v-andalus-faq-tile,
.v-andalus-honor-card { background: var(--card); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.v-arabic-branch { background: var(--card); border-color: color-mix(in srgb, var(--primary) 30%, var(--accent-soft, var(--border))); }

/* Smooth theme transitions on surfaces */
.egyptian-site,
.eg-nav,
.eg-section,
.eg-course-card,
.eg-price-card,
.eg-faq-item,
.eg-feature-item,
.eg-honor-card,
.v-mag-shell,
.v-mag-course,
.v-mag-faq-item,
.v-oxford-card,
.v-oxford-course-item,
.v-andalus-faq-tile,
.v-andalus-honor-card,
.v-khaled-course,
.v-faq-details,
.v-showcase-card,
.eg-footer-rich {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.eg-theme-toggle .eg-icon-light { display: none; }
html[data-theme="dark"] .eg-theme-toggle .eg-icon-dark { display: none; }
html[data-theme="dark"] .eg-theme-toggle .eg-icon-light { display: inline; }

@media (max-width: 900px) {
    .eg-footer-grid { grid-template-columns: 1fr 1fr; }
    .v-eng-skills, .v-arabic-branches { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .eg-footer-grid { grid-template-columns: 1fr; }
}