/* =========================================================
    --- GLOBAL PALETTE & VARIABLES --- 
    ========================================================= */
/* INSTRUCTION: :root variables act as a master control panel. Change a color here, and it updates everywhere in the code. */
:root {
    /* --- BACKGROUND FOUNDATION --- */
    --bg-deep: #080607;
    --bg-panel: #120b0e;

    /* --- GLOBAL TEXT COLORS --- */
    --text-light: #f3edef;
    --text-muted: #99858c;

    /* --- IDENTITY PANEL ACCENT COLORS (WINE/RED THEME) --- */
    --c-crimson: #8c0f2b;
    --c-wine: #5c0a1f;
    --c-plum: #42163b;
    --c-rose: #9e4763;
    --c-aubergine: #30112c;
    --c-indigo: #251e45;

    /* --- EXACT REQUESTED NEON PALETTE (MAIN CATEGORY COLORS) --- */
    --c-art: #FF007F;
    --c-3d: #00E5FF;
    --c-anim: #FF003C;
    --c-urban: #39FF14;
    --c-tools: #A300FF;
    --c-design: #FFEA00;

    /* --- BLOB INTERIOR COLOR --- */
    --bg-interior: #080607;

    /* --- FONTS --- */
    --font-display: 'Syne', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-blobs: 'Anta', sans-serif;
}

/* INSTRUCTION: GLOBAL RESET */
/* Removes default browser margins/padding so our custom layout fits exactly to the edges. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
    /* Hides default mouse pointer so our custom white dot works */
}

/* =========================================================
    --- HUB BACKGROUND FOUNDATION --- 
    ========================================================= */
body {
    background-color: var(--bg-deep);
    color: var(--text-light);
    font-family: var(--font-mono);
    /* 'overflow: hidden' stops the page from scrolling down, locking the hub in place on desktop. */
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* Touch Device Overrides */
@media (pointer: coarse) {
    body {
        cursor: auto;
    }
}

/* =========================================================
   --- ACCESSIBILITY & SEO --- 
   ========================================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}