/* ============================================================
   DKsystem – Dark Download Theme
   Override for download.css to achieve a dark tech aesthetic.
   ============================================================ */

:root {
    --bg: #0c1220;
    --text: #e4e8f0;
    --muted: #8a92a4;
    --panel: rgba(16, 24, 42, 0.72);
    --panel-strong: rgba(14, 22, 38, 0.84);
    --accent-strong: #c8d2e0;
    --border: rgba(255, 255, 255, 0.08);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.40);
    --glow: 0 0 60px rgba(56, 152, 236, 0.06);
}

body {
    background-color: var(--bg);
    color: var(--text);
}

/* ---- Nav ---- */
.logo {
    color: #ffffff;
}

.menu a {
    color: rgba(228, 232, 240, 0.82);
}

.menu a:hover,
.menu a.active {
    color: #ffffff;
}

.contact-btn {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    backdrop-filter: blur(12px);
}

.contact-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);
}

/* ---- Labels ---- */
.studio-label,
.section-label,
.card-kicker,
.stat-label {
    color: var(--muted);
}

/* ---- Hero ---- */
.page-hero-copy,
.hero-stat-card {
    border-color: var(--border);
    background: var(--panel-strong);
    box-shadow: var(--shadow), var(--glow);
    backdrop-filter: blur(18px);
}

.page-hero-copy h1 {
    color: #ffffff;
}

.page-intro,
.section-copy,
.download-card-copy,
.library-card p,
.release-notes p,
.catalog-card p {
    color: var(--muted);
}

.hero-stat-card strong {
    color: #ffffff;
}

.hero-stat-card span {
    color: var(--muted);
}

/* ---- Cards ---- */
.download-card,
.library-card,
.release-item,
.catalog-card {
    border-color: var(--border);
    background: var(--panel);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
}

.featured-card {
    background: linear-gradient(180deg, rgba(16, 26, 46, 0.88), rgba(12, 20, 36, 0.92));
}

/* ---- Card headings ---- */
.download-card h2,
.library-card h2,
.section-heading h2 {
    color: #ffffff;
}

/* ---- Section heading panel ---- */
.section-heading {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.04);
}

/* ---- Status pill ---- */
.status-pill,
.coming-soon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    border: 1px solid var(--border);
}

/* ---- Download buttons ---- */
.download-btn.primary {
    background: #ffffff;
    color: #0c1220;
}

.download-btn.primary:hover {
    background: #e4e8f0;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.download-btn.secondary {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.download-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);
}

/* ---- Meta grid ---- */
.meta-item {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.03);
}

.meta-label,
.catalog-count {
    color: var(--muted);
}

.meta-item strong,
.release-version strong {
    color: #ffffff;
}

/* ---- Library card ---- */
.library-points span {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    border: 1px solid var(--border);
}

/* ---- Release section ---- */
.release-version span,
.release-meta {
    color: var(--muted);
}

.release-notes h3,
.catalog-card h3 {
    color: #ffffff;
}

/* ---- Catalog cards ---- */
.active-card {
    background: linear-gradient(180deg, rgba(20, 30, 52, 0.88), rgba(14, 22, 40, 0.90));
}

.placeholder-card {
    background: rgba(255, 255, 255, 0.03);
}

.catalog-card a {
    color: var(--text);
}

/* ---- Focus outlines ---- */
.menu a:focus-visible,
.contact-btn:focus-visible,
.download-btn:focus-visible {
    outline-color: rgba(255, 255, 255, 0.5);
}