:root {
    /* Base Backgrounds */
    --background-dark: #0B0B0B;
    --card-bg: #111111;
    --white: #ffffff;
    --black: #000000;

    /* Text Colors */
    --text-light: #ffffff;
    --text-dark: #f1f1f1;
    --text-muted: #aaaaaa;
    --text-contrast: #000000;
    --text-highlight: #FFD700;

    /* Gradients & Accents */
    --gold-start: #FFD700;
    --gold-end: #FF8C00;
    --gold-gradient: linear-gradient(90deg, var(--gold-start), var(--gold-end));
    --gold-border: var(--gold-start);
    --gold-glow: 0 0 10px rgba(255, 215, 0, 0.4);
    --gold-glow-soft: 0 2px 6px rgba(255, 215, 0, 0.15);

    /* Colors for status */
    --error-color: #c30000;
    --confirm-color: #22d500;

    /* Component Colors */
    --main-color: var(--gold-gradient);
    --secondary-color: #333333;

    /* Navigation Tabs */
    --icon-active: #FFD700;
    --icon-inactive: #555555;
    --tab-glow: drop-shadow(0 0 4px #FFD700);

    /* Typography */
    --font-family: 'Sora', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-weight-regular: 100;
    --font-weight-bold: 800;

    /* Radius & Shadows */
    --border-radius-sm: 8px;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --box-shadow-down: 0 4px 8px rgba(255, 215, 0, 0.2);
    --box-shadow-up: 0 -2px 4px rgba(255, 215, 0, 0.1);

    /* Layout Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 20px;
    --spacing-xl: 32px;

    /* Blur & Effects */
    --blur: 8px;

    /* Button */
    --button-padding-vertical: 10px;
    --button-padding-horizontal: 24px;

    /* Z-index layers */
    --z-header: 100;
    --z-popup: 1000;

    /* Padding / Spacing */
    --padding-sm: 8px;
    --padding-md: 12px;
    --padding-lg: 20px;

    /* Shadows */
    --box-shadow-strong: 0 0 10px rgba(255, 215, 0, 0.3);
    --box-shadow-soft: 0 2px 6px rgba(255, 215, 0, 0.15);

    /* Bottom Navigation */
    --bottom-nav-bg: #111111;
    --bottom-nav-divider: rgba(255, 255, 255, 0.05);
    --tab-active-glow: drop-shadow(0 0 4px #FFD700);
}

* {
    -webkit-tap-highlight-color: transparent;
    font-family: "Sora", sans-serif;
}

body, html {
    background-color: var(--background-dark);
    color: var(--text-light);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    font-family: "Sora", sans-serif;
}

.section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: var(--background-dark);*/
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    z-index: 1;
    display: none;
    padding: 20px;
    box-sizing: border-box;
}

.section-visible {
    display: block;
}

.section-animate-in {
    transform: translateX(0) !important;
}