/* ============================================================================
   Scarmonit — Global VS Code Dark theme
   Loaded on EVERY page (after style.css + enhanced.css). Remaps the legacy
   neon design tokens to a VS Code-inspired palette and removes glow, so the
   whole site is consistent with the homepage. Page-specific stylesheets that
   use the tokens pick up the new colors automatically.
   ========================================================================== */

:root {
    /* ---- Helper palette (VS Code Dark) ---- */
    --vsx-bg:          #1e1e1e;
    --vsx-sunken:      #181818;
    --vsx-surface:     #252526;
    --vsx-surface-2:   #2d2d30;
    --vsx-surface-3:   #34343a;
    --vsx-border:      #3a3a3d;
    --vsx-border-soft: #2b2b2d;
    --vsx-text:        #d4d4d4;
    --vsx-text-strong: #f3f3f3;
    --vsx-text-dim:    #9a9a9d;
    --vsx-blue:        #4fc1ff;
    --vsx-purple:      #c586c0;
    --vsx-green:       #4ec9b0;
    --vsx-btn:         #0e639c;
    --vsx-btn-hover:   #1177bb;
    --vsx-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
    --vsx-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* ---- Remap style.css tokens ---- */
    --bg-dark: #1e1e1e;
    --bg-darker: #181818;
    --accent-purple: #c586c0;
    --accent-blue: #4fc1ff;
    --accent-gold: #4fc1ff;     /* gold -> primary blue */
    --accent-fire: #c586c0;     /* fire -> purple */
    --gold-glow: transparent;
    --purple-glow: transparent;
    --glass-bg: #252526;
    --glass-border: #3a3a3d;
    --text-main: #d4d4d4;
    --text-dim: #9a9a9d;
    --gold: #4fc1ff;
    --gold-light: #79d0ff;
    --purple: #c586c0;
    --fire: #c586c0;
    --blue: #4fc1ff;
    --green: #4ec9b0;
    --text: #d4d4d4;
    --card: #252526;
    --card-hover: #2d2d30;
    --border: #3a3a3d;

    /* ---- Remap enhanced.css tokens ---- */
    --color-bg-dark: #1e1e1e;
    --color-bg-darker: #181818;
    --color-bg-card: #252526;
    --color-bg-card-hover: #2d2d30;
    --color-accent-purple: #c586c0;
    --color-accent-blue: #4fc1ff;
    --color-accent-gold: #4fc1ff;
    --color-accent-fire: #c586c0;
    --color-accent-green: #4ec9b0;
    --glow-gold: transparent;
    --glow-purple: transparent;
    --glow-blue: transparent;
    --color-text-primary: #f3f3f3;
    --color-text-secondary: #9a9a9d;
    --color-text-dim: #6e7681;
    --font-primary: var(--vsx-sans);
    --font-display: var(--vsx-sans);
    --shadow-glow-gold: 0 4px 14px rgba(0, 0, 0, .35);
    --shadow-glow-purple: 0 4px 14px rgba(0, 0, 0, .35);
}

/* ---- Global de-glow ---- */
.bg-wrapper { display: none !important; }
.ambient-orbs, .upload-particles { display: none !important; }  /* upload page glow */
h1, h2, h3, h4, h5, h6, .logo, .footer-logo,
.section-title, .hero-subtitle, .page-title { text-shadow: none !important; }

/* Neutralize the gradient-gold text fill the legacy theme paints on headings */
h1, h2, h3, h4, .logo, .footer-logo, .section-title, .hero-subtitle,
.page-title, .stat-number {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    -webkit-background-clip: border-box;
            background-clip: border-box;
}

body {
    background: var(--vsx-sunken);
    color: var(--vsx-text);
    font-family: var(--vsx-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .logo, .footer-logo,
.section-title, .hero-subtitle, .page-title { font-family: var(--vsx-sans); }

/* The global main.js adds a `.reveal` (opacity:0) scroll animation that can get
   stuck hiding content. Keep everything reliably visible site-wide. */
.reveal { opacity: 1 !important; transform: none !important; }

/* ---- Scrollbar (neutral, not gold) ---- */
* { scrollbar-color: #3a3a3d var(--vsx-sunken); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--vsx-sunken); }
::-webkit-scrollbar-thumb {
    background: #3a3a3d;
    border-radius: 6px;
    border: 3px solid var(--vsx-sunken);
}
::-webkit-scrollbar-thumb:hover { background: #4a4a4f; }

/* ---- Nav chrome ---- */
nav {
    background: rgba(30, 30, 30, .85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vsx-border-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.logo {
    color: var(--vsx-text-strong);
    -webkit-text-fill-color: currentColor;
    background: none;
    font-family: var(--vsx-sans);
    font-weight: 800;
    letter-spacing: -.02em;
}
.logo::before {
    content: '{ }';
    font-family: var(--vsx-mono);
    font-weight: 600;
    color: var(--vsx-blue);
    -webkit-text-fill-color: var(--vsx-blue);
    margin-right: .5rem;
}
.nav-links a, .nav-dropdown-trigger { color: var(--vsx-text-dim); font-weight: 500; border-radius: 6px; }
.nav-standalone { font-size: .95rem; font-weight: 500; text-decoration: none; }
.nav-links a:hover, .nav-dropdown-trigger:hover,
.nav-links a.active, .nav-dropdown-trigger.active {
    color: var(--vsx-text-strong);
    background: var(--vsx-surface-2);
}
.nav-home.active { color: var(--vsx-blue) !important; }
.nav-links a.active::after, .nav-home.active::after,
.nav-dropdown-trigger.active::after { background: var(--vsx-blue) !important; }
.dropdown-menu { background: var(--vsx-surface); border: 1px solid var(--vsx-border); border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.dropdown-menu a { color: var(--vsx-text-dim); }
.dropdown-menu a:hover, .dropdown-menu a.active {
    color: var(--vsx-text-strong);
    background: var(--vsx-surface-2);
}
.menu-toggle span { background: var(--vsx-text); }

/* ---- Footer chrome ---- */
.site-footer { background: var(--vsx-bg); border-top: 1px solid var(--vsx-border-soft); }
.footer-logo { color: var(--vsx-text-strong); -webkit-text-fill-color: currentColor; background: none; }
.footer-tagline { color: var(--vsx-text-dim); }
.footer-brand-accent { height: 3px; width: 48px; border-radius: 2px; background: linear-gradient(90deg, var(--vsx-blue), var(--vsx-purple)); }
.footer-links a:hover { color: var(--vsx-blue); }
.footer-bottom { border-image: none; border-top: 1px solid var(--vsx-border-soft); }
.footer-bottom a { color: var(--vsx-blue); }
.footer-social-link:hover { color: var(--vsx-text-strong); background: var(--vsx-surface-2); }
.back-to-top { background: var(--vsx-btn); color: #fff; border: none; }
.back-to-top:hover { background: var(--vsx-btn-hover); }