/* Basic CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    min-height: calc(100% - 1em);
    font-family: Roboto, Avenir, sans-serif;
}

/* Color Variables */
:root {
    --primary-color: hsl(186, 84%, 40%);
    --primary-light: hsl(186, 84%, 60%);
    --light-color  : hsl(186, 84%, 90%);
    --darkest      : #0d0d0d;
    --dark         : #2d2d2d;
    --white        : hsl(0, 0%, 100%);
    --gray         : hsl(0, 0%, 60%);
    --light-gray   : hsl(0, 0%, 90%);
    --accent       : hsl(12, 60%, 40%);
    --link         : hsl(12, 60%, 40%);
    
    /* Interface colors - used by buttons, shortcuts, and interactive elements */
    --interface-primary: rgb(0, 90, 140);
    --interface-primary-hover: rgb(0, 70, 110);
    --interface-primary-light: rgba(0, 90, 140, 0.1);
    --interface-primary-shadow: rgba(0, 90, 140, 0.3);
    --interface-secondary: #f0f0f0;
    --interface-secondary-hover: #e0e0e0;
    
    /* Semantic colors */
    --error-color: #d93025;
    --error-light: rgba(217, 48, 37, 0.1);
    --warning-color: #ffc107;
    --success-color: #34a853;
    
    /* Text colors */
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #999;
}

/* Dark Theme Variables */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: hsl(186, 84%, 40%);
        --primary-light: hsl(186, 84%, 60%);
        --light-color: hsl(186, 84%, 90%);
        --darkest: #0d0d0d;
        --dark: #2d2d2d;
        --white: hsl(0, 0%, 100%);
        --gray: hsl(0, 0%, 60%);
        --light-gray: hsl(0, 0%, 90%);
        --accent       : hsl(12, 60%, 40%);
        --link: hsl(12, 60%, 40%);
        
        /* Interface colors remain the same in dark mode for consistency */
        --interface-primary: rgb(0, 90, 140);
        --interface-primary-hover: rgb(0, 70, 110);
        --interface-primary-light: rgba(0, 90, 140, 0.1);
        --interface-primary-shadow: rgba(0, 90, 140, 0.3);
        --interface-secondary: #f0f0f0;
        --interface-secondary-hover: #e0e0e0;
        
        --error-color: #d93025;
        --error-light: rgba(217, 48, 37, 0.1);
        --warning-color: #ffc107;
        --success-color: #34a853;
        
        --text-primary: #333;
        --text-secondary: #666;
        --text-muted: #999;
    }
}

html {
    font-size: 16px;
    background-color: var(--dark);
}

body {
    background-color: var(--light-color);
    color: var(--dark);
    margin: 1.5em;
    padding: 1em;
    border-radius: 1em;
}

body.fullscreen {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

a {
    color: var(--link);
}

button {
    background-color: var(--primary-light);
    color: var(--light-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: var(--light-gray);
}