/* =========================================
   🌐 GLOBAL VARIABLES & RESETS
   ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
}

:root {
    --bg: #0b0f1a;
    --bg-soft: #10152a;
    --surface: #141a2e;
    --surface-glass: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.12);
    --text: #f5f6fa;
    --text-muted: #9096a8;
    --gold-1: #f2e49b;
    --gold-2: #8a7a2e;
    --accent: #e3c65b;
    --accent-soft: rgba(227, 198, 91, 0.16);
    --venom: #050505;
    --shadow: rgba(0, 0, 0, 0.5);
}

body.light-mode {
    --bg: #f6f2e6;
    --bg-soft: #efe8d4;
    --surface: #ffffff;
    --surface-glass: rgba(11, 15, 26, 0.04);
    --border: rgba(11, 15, 26, 0.12);
    --text: #14171f;
    --text-muted: #5c6070;
    --accent: #ab7d1c;
    --accent-soft: rgba(171, 125, 28, 0.14);
    --shadow: rgba(30, 24, 10, 0.16);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--text);
    overflow: hidden; /* Prevent scrolling during loading screen */
    transition: background-color 0.6s ease, color 0.6s ease;
}

body.loaded {
    overflow: visible;
}

::selection {
    background: var(--accent);
    color: #14171f;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}