/* CSS Custom Properties / Design Tokens */
:root {

    --primary: #0095cb; /* Caribbean blue */
    --primary-hover: #0076a1; /* Darker Caribbean blue */
    --primary-light: #E1F5Fe; /* Sky tint */
    --primary-dark: #005D85; /* Deep sea */

    --accent: #FF8A65; /* Sunset orange */
    --accent-hover: #e67551; /* Darker sunset orange */
    --neutral-dark: #263238; /* Charcoal blue */
    --neutral-light: #d9e2e8; /* Light gray-blue */
    --neutral-dark-rgb: 38, 50, 56; /* Charcoal blue RGB */
    --neutral-light-rgb: 217, 226, 232; /* Light gray-blue RGB */

    /** Functional colors **/
    --success: #4CAF50;
    --warning: #FFC107;
    --error: #E63935;

    --filter-light-to-theme: brightness(0) saturate(100%) invert(16%) sepia(15%) saturate(719%) hue-rotate(155deg) brightness(98%) contrast(93%);

    
    /** Assignment **/
    --bg-body: var(--neutral-light);
    --bg-body-rgb: 217, 226, 232;
    --navbar-bg: rgba(0, 0, 0, 0.02);
    --border-color: rgba(var(--neutral-dark-rgb), 0.1);
    --btn-primary-bg: var(--primary-dark);

    --text-main: #212121;
    --text-main-rgb: 33, 33, 33;
    --white: #ffffff;
    --transition-speed: 0.2s;
    --grid-ammount: 20; /* Number of grid squares for background pattern */
    --grid-size: calc(100vw / var(--grid-ammount)); /* Size of each grid square */
    --grid-color-faint: rgba(38, 50, 56, 0.05); /* Grid-line: not hovered */
    --grid-color-bright: rgba(0, 149, 203, 0.5);  /* Grid-line: hovered */
    --animation-curve: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --text-main: var(--neutral-light);
    --text-main-rgb: 245, 247, 249;
    --border-color: rgba(var(--neutral-light-rgb), 0.1);
    --btn-primary-bg: var(--primary-hover);

    --bg-body: var(--neutral-dark);
    --bg-body-rgb: var(--neutral-dark-rgb);
    --navbar-bg: rgba(var(--text-main-rgb), 0.02);

    --filter-light-to-theme: brightness(100%);

    --grid-color-faint: rgba(217, 226, 232, 0.05); 
    --grid-color-bright: rgba(var(--text-main-rgb), 0.8); 


    
}

@media screen and (max-width: 992px) {
    :root {
        --grid-ammount: 10;
    }
}