/* --- CSS Variables and Base Styles --- */
:root {
    --background-color: #E0FFFF; /* Lighter, more pastel aqua */
    --card-background: #FFFFFF;  /* White for the card */
    --text-color: #000000;       /* Black for text, borders, shadows */
    --error-color: #D8000C;      /* Red for error messages */
    --highlight-color: #FDFFB6;  /* Pastel Yellow for highlight */
    --hover-background-color: #D1F7F7; /* Slightly darker pastel aqua */
    --body-font-family: 'DM Sans', sans-serif;
    --heading-font-family: 'Space Grotesk', sans-serif;
    --border-width: 3px;
    --shadow-offset: 8px;
}

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

html {
    font-size: 100%;
}

body {
    font-family: var(--body-font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

:focus-visible {
    outline: var(--border-width) solid var(--text-color);
    outline-offset: 4px;
}