/**
 * JavocSoft Portfolio - Dark theme
 *
 * Applied when <html data-theme="dark"> (set by js/theme.js, or by the inline
 * script in <head> before first paint). Redefines the theme variables from
 * styles.css and adjusts the few components that use fixed colours.
 */

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

    --color-primary: #3b82f6;
    --color-primary-dark: #1d4ed8;
    --color-bg: #0b1220;
    --surface: #131c2e;
    --text: #e5e7eb;
    --text-2: #cbd5e1;
    --color-gray: #94a3b8;
    --color-light-gray: #2a3a52;
    --header-bg: rgba(15, 23, 42, 0.92);
    --nav-bg: rgba(15, 23, 42, 0.98);
    --toolbar-bg: rgba(11, 18, 32, 0.96);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

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

/* Header, footer, generic */
html[data-theme="dark"] .header {
    border-bottom: 1px solid var(--color-light-gray);
}

html[data-theme="dark"] .nav-link:hover {
    background: rgba(139, 92, 246, 0.15);
}

/* The footer is dark in both themes and uses these greys as *text* colours */
html[data-theme="dark"] .footer {
    --color-light-gray: #cbd5e1;
    --color-gray: #94a3b8;
    border-top: 1px solid #1e293b;
}

/* Icons with transparent backgrounds need a light tile to stay visible */
html[data-theme="dark"] .project-icon.has-image {
    background: #e2e8f0 !important;
}

html[data-theme="dark"] .g-bg {
    fill: #e2e8f0;
}

/* Text colours that are too dark/saturated on a dark surface */
html[data-theme="dark"] .project-type.extension { color: #60a5fa; }
html[data-theme="dark"] .project-type.service { color: #a78bfa; }
html[data-theme="dark"] .project-type.api { color: #22d3ee; }
html[data-theme="dark"] .project-type.game { color: #f472b6; }
html[data-theme="dark"] .project-type.other { color: #fbbf24; }
html[data-theme="dark"] .project-type.desktop { color: #34d399; }

html[data-theme="dark"] .ecosystem-tag,
html[data-theme="dark"] .ecosystem-title i,
html[data-theme="dark"] .section-link,
html[data-theme="dark"] .cta-btn.secondary,
html[data-theme="dark"] .filter-btn:hover,
html[data-theme="dark"] .tech-chip:hover {
    color: #a78bfa;
}

html[data-theme="dark"] .cta-btn.secondary {
    background: transparent;
    border-color: #a78bfa;
}

html[data-theme="dark"] .ecosystem-tag:hover,
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .view-btn.active,
html[data-theme="dark"] .mode-btn.active {
    color: var(--color-white);
}

html[data-theme="dark"] .filter-count {
    background: rgba(148, 163, 184, 0.2);
}

html[data-theme="dark"] .g-node:hover .g-ring,
html[data-theme="dark"] .g-node:focus-visible .g-ring {
    stroke: #f8fafc;
}

html[data-theme="dark"] .g-edge.hl {
    stroke: #a78bfa;
}

html[data-theme="dark"] .g-initial {
    fill: #0f172a;
}

/* Status page */
html[data-theme="dark"] .overall-status-banner.loading {
    background: linear-gradient(135deg, #1e293b, #172033);
    color: #94a3b8;
}

html[data-theme="dark"] .overall-status-banner.operational {
    background: linear-gradient(135deg, #062e22, #0b3d2d);
    color: #6ee7b7;
}

html[data-theme="dark"] .overall-status-banner.partial_outage {
    background: linear-gradient(135deg, #3a2a08, #4a3510);
    color: #fcd34d;
}

html[data-theme="dark"] .overall-status-banner.major_outage {
    background: linear-gradient(135deg, #3b1212, #4c1717);
    color: #fca5a5;
}

html[data-theme="dark"] .stat-item,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .skeleton-card {
    background: rgba(19, 28, 46, 0.9);
    border-color: rgba(167, 139, 250, 0.18);
}

html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .service-name,
html[data-theme="dark"] .status-error h3 {
    color: var(--text);
}

html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .service-description,
html[data-theme="dark"] .response-time-value,
html[data-theme="dark"] .status-error p,
html[data-theme="dark"] .status-badge.checking {
    color: #94a3b8;
}

html[data-theme="dark"] .service-meta,
html[data-theme="dark"] .last-checked,
html[data-theme="dark"] .auto-refresh-info {
    color: #94a3b8;
}

html[data-theme="dark"] .status-badge.online { color: #6ee7b7; }
html[data-theme="dark"] .status-badge.offline { color: #fca5a5; }

html[data-theme="dark"] .service-category,
html[data-theme="dark"] .service-link,
html[data-theme="dark"] .last-checked .refresh-btn {
    color: #a78bfa;
}

html[data-theme="dark"] .service-link:hover,
html[data-theme="dark"] .last-checked .refresh-btn:hover {
    color: #c4b5fd;
}

html[data-theme="dark"] .skeleton-line {
    background: linear-gradient(90deg, #1e293b 25%, #2a3a52 50%, #1e293b 75%);
    background-size: 200% 100%;
}

/* Updates page: links and headings written with inline dark purple */
html[data-theme="dark"] [style*="#6d28d9"] {
    color: #a78bfa !important;
}

/* Contact form */
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(167, 139, 250, 0.35);
    color: var(--text);
}

html[data-theme="dark"] .form-group input::placeholder,
html[data-theme="dark"] .form-group textarea::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

html[data-theme="dark"] .tech-tag,
html[data-theme="dark"] .contact-detail-icon {
    color: #a5b4fc;
}

html[data-theme="dark"] .g-zone-label {
    filter: brightness(1.5);
}

/* Book view: dark paper */
html[data-theme="dark"] .project-book {
    --grabfold-paper: #1b2436;
    --grabfold-lift: #2a3550;
    --grabfold-edge: #2c3850;
    --bk-ink: #e5e7eb;
    --bk-muted: #9ca3af;
    --bk-line: #33415a;
}

html[data-theme="dark"] .bk-page .bk-credit a,
html[data-theme="dark"] .bk-page .bk-end-links a {
    color: #c4b5fd;
}

/* Featured cards: lighter accents on the dark surface */
html[data-theme="dark"] .fc-main,
html[data-theme="dark"] .fc-icon:hover,
html[data-theme="dark"] .fc-icon:focus-visible {
    color: #93c5fd;
}

html[data-theme="dark"] .fc-icon:hover,
html[data-theme="dark"] .fc-icon:focus-visible {
    border-color: #93c5fd;
    background: rgba(147, 197, 253, 0.1);
}

html[data-theme="dark"] .fc-type {
    filter: brightness(1.25);
}