/* ═══════════════════════════════════════════════════════════════
   MoCoPo unified theme — single source of truth for light/dark.
   Dark is the default. `body.light` (persisted in localStorage
   'mocopo-theme' by views/template/theme-toggle.ejs) flips tokens.

   All directory pages (.servers-page / .landing-page /
   .server-detail-page) consume ONLY these --mc-* tokens.

   Why !important on the page background: /css/theme/bootstrap.css
   sets `body { background-color: var(--body-bg) !important }`
   driven by the legacy app_theme cookie — a competing theme system.
   Higher specificity + !important here makes body.light the only
   theme switch on these pages.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Backgrounds */
    --mc-bg: #0d0b07;
    --mc-surface: #12100b;                       /* cards, panels */
    --mc-surface-2: #161616;                     /* inputs, chips */
    --mc-surface-3: #1e1c15;                     /* tags, logo wells, active tabs */
    --mc-surface-soft: rgba(244, 240, 230, 0.02);/* dashboard rows */
    --mc-input-bg: rgba(244, 240, 230, 0.04);
    --mc-input-bg-focus: rgba(244, 240, 230, 0.06);

    /* Borders */
    --mc-border: #1e1c15;
    --mc-border-2: #2a2a2a;
    --mc-border-soft: rgba(244, 240, 230, 0.09);
    --mc-input-border: rgba(244, 240, 230, 0.12);

    /* Text */
    --mc-text: #fafafa;
    --mc-soft: #c9c4b4;
    --mc-muted: #9d9785;
    --mc-faint: #8f897a;

    /* Amber — solid fills (buttons, badges) */
    --mc-amber: #FBBF24;
    --mc-amber-hover: #FACC15;
    --mc-on-amber: #0d0b07;
    --mc-on-amber-muted: #4a3d10;

    /* Amber — as text/links/borders (needs darkening on light bg) */
    --mc-accent: #FBBF24;
    --mc-accent-hover: #FACC15;
    --mc-accent-bg: rgba(251, 191, 36, 0.1);
    --mc-accent-border: rgba(251, 191, 36, 0.3);
    --mc-accent-border-strong: rgba(251, 191, 36, 0.45);

    /* Status */
    --mc-green: #4ade80;
    --mc-green-border: rgba(74, 222, 128, 0.3);
    --mc-red: #f87171;
    --mc-red-border: rgba(239, 68, 68, 0.4);
    --mc-red-bg: rgba(239, 68, 68, 0.12);

    /* Code blocks — deliberately dark in BOTH themes */
    --mc-code-bg: #12100b;
    --mc-code-border: #1e1c15;
    --mc-code-text: #FACC15;
}

body.light {
    --mc-bg: #faf8f3;
    --mc-surface: #ffffff;
    --mc-surface-2: #f1ede2;
    --mc-surface-3: #e8e2d4;
    --mc-surface-soft: #ffffff;
    --mc-input-bg: #ffffff;
    --mc-input-bg-focus: #fffdf7;

    --mc-border: #e8e2d4;
    --mc-border-2: #ddd6c6;
    --mc-border-soft: #e2dcc9;
    --mc-input-border: #ddd6c6;

    --mc-text: #1a1712;
    --mc-soft: #4a4536;
    --mc-muted: #6b6353;
    --mc-faint: #8a8271;

    --mc-amber: #FBBF24;
    --mc-amber-hover: #f0ab00;
    --mc-on-amber: #1a1712;
    --mc-on-amber-muted: #6b5510;

    --mc-accent: #B45309;          /* #FBBF24 on white ≈ 2:1 — fails WCAG */
    --mc-accent-hover: #92600a;
    --mc-accent-bg: rgba(180, 83, 9, 0.08);
    --mc-accent-border: rgba(180, 83, 9, 0.3);
    --mc-accent-border-strong: rgba(180, 83, 9, 0.45);

    --mc-green: #15803d;
    --mc-green-border: rgba(21, 128, 61, 0.35);
    --mc-red: #b91c1c;
    --mc-red-border: rgba(185, 28, 28, 0.4);
    --mc-red-bg: rgba(185, 28, 28, 0.08);
}

/* ── Page base: beat bootstrap's `body { background !important }` ── */
body.servers-page,
body.server-detail-page {
    background: var(--mc-bg) !important;
    color: var(--mc-text);
    min-height: 100vh;
}

/* ── Neutralize bootstrap element rules (h1-h6/p/a colors beat inheritance) ── */
.servers-page h1, .servers-page h2, .servers-page h3,
.servers-page h4, .servers-page h5, .servers-page h6,
.server-detail-page h1, .server-detail-page h2, .server-detail-page h3,
.server-detail-page h4, .server-detail-page h5, .server-detail-page h6 { color: var(--mc-text); }

/* ── Logos: dark needs white inversion, light uses original black SVG ── */
.servers-logo img, .landing-logo img { filter: invert(1) brightness(1.6); }
body.light .servers-logo img, body.light .landing-logo img { filter: none; }

/* ── Theme toggle button ── */
.theme-toggle {
    position: fixed;
    top: 1.35rem;
    right: 1.5rem;
    z-index: 50;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border-2);
    color: var(--mc-accent);
    font-size: 1.15rem;
    cursor: pointer;
    transition: border-color 0.2s ease-out;
    padding: 0;
}
.theme-toggle:hover { border-color: var(--mc-accent); }
.theme-toggle .theme-icon-sun { display: block; }
.theme-toggle .theme-icon-moon { display: none; }
body.light .theme-toggle .theme-icon-sun { display: none; }
body.light .theme-toggle .theme-icon-moon { display: block; }

/* ── Shared footer (inline styles in footer.ejs rely on inheritance;
      bootstrap's p/a element colors would defeat it) ── */
.servers-page .site-footer,
.server-detail-page .site-footer {
    background: var(--mc-bg) !important;
    border-top-color: var(--mc-accent-border) !important;
}
.servers-page .site-footer-nav a,
.servers-page .site-footer-logo,
.servers-page .site-footer-bottom p,
.server-detail-page .site-footer-nav a,
.server-detail-page .site-footer-logo,
.server-detail-page .site-footer-bottom p { color: var(--mc-text); }
.site-footer-logo img { filter: brightness(0) saturate(100%) invert(78%) sepia(60%) saturate(600%) hue-rotate(360deg) brightness(105%) contrast(97%); }
body.light .site-footer-logo img { filter: none; }