*,
*::before,
*::after {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Poppins';
    src: local('Poppins'), local('Poppins-Regular'), url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'Poppins';
    src: local('Poppins'), local('Poppins-Bold'), url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: bold;
}

:root {

    /* General Colors */
    --background: #f8f8f8;
    --foreground: #343434;

    /* Neutral Colors */
    --neutral-50: #fafafa;
    --neutral-100: #eeeeee;
    --neutral-200: #dadada;
    --neutral-300: #c4c4c4;
    --neutral-400: #929292;
    --neutral-500: #646464;
    --neutral-600: #464646;
    --neutral-700: #343434;
    --neutral-800: #232323;
    --neutral-900: #181818;

    /* Blue Colors */
    --blue: #1a85f0;
    --blue-50: #eef6ff;
    --blue-100: #d9eafd;
    --blue-200: #bbdbfc;
    --blue-300: #8cc6f9;
    --blue-400: #51a7f5;
    --blue-500: #1a85f0;
    --blue-600: #006adb;
    --blue-700: #0058c4;
    --blue-800: #0046a8;
    --blue-900: #0a3d89;

    /* Red Colors */
    --red: #e62b1e;
    --red-50: #fef2f2;
    --red-100: #ffe4e3;
    --red-200: #ffcfcd;
    --red-300: #ffaba8;
    --red-400: #ff7671;
    --red-500: #f84940;
    --red-600: #e62b1e;
    --red-700: #bf1f14;
    --red-800: #9b1d15;
    --red-900: #7f1e19;

    /* Green Colors */
    --green: #29c809;
    --green-50: #f1fdf2;
    --green-100: #dffce2;
    --green-200: #bff8c6;
    --green-300: #8cf096;
    --green-400: #52e056;
    --green-500: #29c809;
    --green-600: #2ba413;
    --green-700: #298022;
    --green-800: #266426;
    --green-900: #225225;

    /* Purple Colors */
    --purple: #9a46f5;
    --purple-50: #faf5ff;
    --purple-100: #f5ecff;
    --purple-200: #ecddff;
    --purple-300: #dcc0ff;
    --purple-400: #c593ff;
    --purple-500: #ae65ff;
    --purple-600: #9a46f5;
    --purple-700: #8130d5;
    --purple-800: #6b27ac;
    --purple-900: #571d88;

    /* Accent Blue */
    --accent-blue: #1ac4f0;
    --accent-blue-50: #eff9fe;
    --accent-blue-100: #dff4fd;
    --accent-blue-200: #b8e9fa;
    --accent-blue-300: #77d8f6;
    --accent-blue-400: #1ac4f0;
    --accent-blue-500: #00abdb;
    --accent-blue-600: #0089b8;
    --accent-blue-700: #006d94;
    --accent-blue-800: #005c7b;
    --accent-blue-900: #004c67;

    /* Yellow Colors */
    --yellow: #ebda1e;
    --yellow-50: #fafde9;
    --yellow-100: #f5fec8;
    --yellow-200: #eff993;
    --yellow-300: #ebed53;
    --yellow-400: #ebda1e;
    --yellow-500: #ddbf00;
    --yellow-600: #bf9400;
    --yellow-700: #986a00;
    --yellow-800: #7f5200;
    --yellow-900: #6c4304;

    /* Light Mode Colors */
    --light-color-main: var(--neutral-100);
    --light-color-main-2: var(--neutral-200);
    --light-color-accent: var(--blue);
    --light-color-accent-hover: var(--blue-700);
    --light-color-usedlink: var(--purple);
    --light-color-contrast: var(--neutral-700);
    --light-color-header: var(--neutral-300);
    --light-color-warning: var(--yellow-600);
    --light-color-alarm: var(--red-700);

    /* Dark Mode Colors */
    --dark-color-main: var(--neutral-700);
    --dark-color-main-2: var(--neutral-600);
    --dark-color-accent: var(--accent-blue);
    --dark-color-accent-hover: var(--accent-blue-700);
    --dark-color-usedlink: var(--purple);
    --dark-color-contrast: var(--neutral-100);
    --dark-color-header: var(--neutral-800);
    --dark-color-warning: var(--yellow-500);
    --dark-color-alarm: var(--red-500);

    /* Utility Variables */
    --border-radius: 1rem;
    --text-size: 1rem;

      /* 🎯 Interactive States */
    --error: var(--red-600);
    --error-hover: var(--red-700);
    --success: var(--green-500);
    --success-hover: var(--green-600);
    --warning: var(--yellow-600);
    --warning-hover: var(--yellow-700);
    --info: var(--blue-500);
    --info-hover: var(--blue-600);
    --disabled: var(--neutral-400);

    /* 🖱️ Hover & Focus */
    --hover-bg: rgba(26, 133, 240, 0.1);
    --focus-ring: 2px solid var(--accent-color);
    --dark-focus-ring: 2px solid var(--dark-color-accent);

    /* 🔘 Selection */
    --selection-bg: var(--accent-color);
    --selection-text: #fff;
    --dark-selection-bg: var(--dark-color-accent);
    --dark-selection-text: #000;

    /* 🌟 Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);

    /* 🌈 Gradients */
    /*
    --gradient-light: linear-gradient(135deg, var(--light-color-accent) 0%, var(--light-color-accent-hover) 100%);
     */
    --gradient-dark: linear-gradient(135deg, var(--dark-color-accent) 0%, var(--dark-color-accent-hover) 100%);

    /* 🔤 Typography */
    --font-body: 'Poppins', sans-serif;
    --font-size-xs: 0.65rem;
    --font-size-sm: 0.80rem;
    --font-size-md: 0.92rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.3rem;
    --font-size-xxl: 1.75rem;
    --line-height: 1.6;


    /* 📏 Borders */
    --border-width: 1px;
    --border-style: solid;
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --default-border-color: var(--border-color);


    /* Color Scheme Light */
    /*
    --main-color: var(--light-color-main);
    --main-color-2: var(--light-color-main-2);
    --accent-color: var(--light-color-accent);
    --accent-color-hover: var(--light-color-accent-hover);
    --dark-color: var(--light-color-contrast);
    --button-color: var(--light-color-contrast);
    --text-color: var(--light-color-contrast);
    --header-color: var(--light-color-header);
    --border-color: var(--light-color-contrast);
     */

    /* Color Scheme Dark */
    --main-color: var(--dark-color-main);
    --main-color-2: var(--dark-color-main-2);
    --accent-color: var(--dark-color-accent);
    --accent-color-hover: var(--dark-color-accent-hover);
    --contrast-color: var(--dark-color-contrast);
    --button-color: var(--dark-color-contrast);
    --text-color: var(--dark-color-contrast);
    --header-color: var(--dark-color-header);
    --border-color: var(--dark-color-contrast);
    --link-color: var(--dark-color-accent);
    --used-link-color: var(--dark-color-usedlink)
}

/*
@media (prefers-color-scheme: dark) {
    :root {
    --main-color: var(--dark-color-main);
    --main-color-2: var(--dark-color-main-2);
    --accent-color: var(--dark-color-accent);
    --accent-color-hover: var(--dark-color-accent-hover);
    --dark-color: var(--dark-color-contrast);
    --button-color: var(--dark-color-contrast);
    --text-color: var(--dark-color-contrast);
    --header-color: var(--dark-color-header);
    --border-color: var(--dark-color-contrast);
    }
}
*/

html {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--text-color);
    background-color: black;
    margin: 0;
    padding: 0;
    width: 100%;
    transition: background 0.3s ease, color 0.3s ease;
    font-weight: 500;
    display: flex;
    flex-direction: column;
}

body {
    margin: 0;
    position: relative;
    height: 100%;
}

.blur-container {
    display: flex;
    justify-content: center;
}

.blur {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-lg);
    padding: 15px;
    box-shadow: 0px 1px 5px rgba(255, 255, 255, 0.2);
}

.link {
    color: var(--accent-color);
}

.link:visited {
    color: var(--used-link-color);
}

.link:hover {
    color: var(--accent-color-hover);
}