:root {
    /* Colors Application */
    --color-primary: #0a192f; /* Deep Navy Background */
    --color-secondary: #112240; /* Lighter Navy for cards */
    --color-tertiary: #233554; /* Even lighter for hover states */
    --color-accent: #64ffda; /* Teal accent for tech feel */
    --color-text-main: #ccd6f6; /* Off-white text */
    --color-text-secondary: #8892b0; /* Muted text */
    --color-white: #e6f1ff;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-card: linear-gradient(180deg, rgba(17, 34, 64, 0.8) 0%, rgba(10, 25, 47, 0.9) 100%);

    /* Typography */
    --font-sans: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Transitions */
    --transition-standard: all 0.3s ease-in-out;

    /* Shadows */
    --shadow-card: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
    --shadow-hover: 0 20px 30px -15px rgba(2, 12, 27, 0.7);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-primary);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

::selection {
    background-color: var(--color-tertiary);
    color: var(--color-accent);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-primary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-tertiary);
    border: 3px solid var(--color-primary);
    border-radius: 10px;
}