:root {
    --background: #011628;
    --fontColor: black;
    --text: #CBE0F0;
    --gradient: linear-gradient(315deg, #F7971E 0%, #FFD200 94%);
    --title: #ff9e64;
    --textTypeBox: #547998;
    --stats: #B4D0E9;
    --fontFamily: "Tomorrow", sans-serif;
    --gray-light: #8F9BA9; 
    --black-dark: #202C39;
    --navbar-width: 256px;
    --navbar-width-min: 80px;
    --profile: #1d1f25;
    --profileCard: #12181e;

    --navbar-dark-primary: #18283b;
    --navbar-dark-secondary: #2c3e50;
    --navbar-light-primary: #f5f6fa;
    --navbar-light-secondary: #8392a5;
}


/* Tokyo Night Theme */
[data-theme="tokyoNight"] {
    --background: #011628;
    --fontColor: black;
    --text: #CBE0F0;
    --gradient: linear-gradient(315deg, #F7971E 0%, #FFD200 94%);
    --title: #ff9e64;
    --textTypeBox: #547998;
    --stats: #B4D0E9;
    --fontFamily: "Tomorrow", sans-serif;
    --gray-light: #8F9BA9;  /* Light gray suitable for background accents */
    --black-dark: #202C39;  /* Darker shade for darker accents */
}

/* Dark Theme */
[data-theme="dark"] {
    --background: #121212;
    --fontColor: rgb(36, 100, 97);
    --text: #FAFAFA;
    --gradient: linear-gradient(315deg, #F7971E 0%, #FFD200 94%);
    --title: #ffc107;
    --textTypeBox: #706d6d;
    --stats: #BB86FC;
    --fontFamily: "Tomorrow", sans-serif;
    --gray-light: #A0A0A0;  /* Subtle light gray for UI elements */
    --black-dark: #212121;  /* Rich black for text or borders */
}

/* Cyber Theme */
[data-theme="cyber"] {
    --background: #272932;
    --fontColor: white;
    --text: #CB1DCD;
    --gradient: linear-gradient(315deg, #FDF500 0%, #CB1DCD 94%);
    --title: #FDF500;
    --textTypeBox: #D1C5C0;
    --stats: #00ff9f;
    --fontFamily: "Tomorrow", sans-serif;
    --gray-light: #D0D0D0;  /* Light gray for contrast */
    --black-dark: #1A1A1A;  /* Darker black for depth */
}

/* Steam Theme */
[data-theme="steam"] {
    --background: #6e2f3b;
    --fontColor: black;
    --text: #fdd978;
    --gradient: linear-gradient(315deg, #80acaa 0%, #fdd978 94%);
    --title: #2b211e;
    --textTypeBox: #605542;
    --stats: #80acaa;
    --fontFamily: "Tomorrow", sans-serif;
    --gray-light: #C0B8A0;  /* Muted gray for soft accents */
    --black-dark: #3E1C1D;  /* Darker black for borders */
}

/* Terminal Theme */
[data-theme="terminal"] {
    --background: #0D0208;
    --fontColor: white;
    --text: #39ff14;
    --gradient: linear-gradient(315deg, #39ff14 0%, #008F11 94%);
    --title: #008F11;
    --textTypeBox: #706d6d;
    --stats: #39ff14;
    --fontFamily: "Tomorrow", sans-serif;
    --gray-light: #B0B0B0;  /* Soft gray for secondary UI elements */
    --black-dark: #141414;  /* Deep black for borders and contrast */
}

/* Araki Nobuyoshi Theme */
[data-theme="arakiNobuyoshi"] {
    --background: #232335;
    --fontColor: white;
    --text: #086063;
    --gradient: linear-gradient(90deg, #232335 0%, #0a4951 100%);
    --title: #B42D2C;
    --textTypeBox: #CCB1B0;
    --stats: #1a5426;
    --fontFamily: "Tomorrow", sans-serif;
    --gray-light: #8A8A8A;  /* Muted gray for elements and text */
    --black-dark: #1F1F1F;  /* Dark black for subtle accents */
}

/* Hero Theme */
[data-theme="hero"] {
    --background: #440402;
    --text: #3A3E47;
    --fontColor: #ffffff;
    --gradient: linear-gradient(90deg, #70A960 0%, #76C9A5 100%);
    --title: #B80100;
    --textTypeBox: #CD6A5A;
    --stats: #6A839D;
    --fontFamily: "Tomorrow", sans-serif;
    --gray-light: #B0B0B0;  /* Soft gray for light UI elements */
    --black-dark: #3A3A3A;  /* Darker gray for accents */
}