:root {
    /* Light Mode Variables (Default) */
    --md-sys-color-primary: #006874; 
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #97f0ff;
    --md-sys-color-on-primary-container: #001f24;
    --md-sys-color-surface: #fbfdfd;
    --md-sys-color-on-surface: #191c1d;
    --md-sys-color-surface-container: #eff1f1;
    --md-sys-color-surface-container-high: #e9ecec;
    --md-sys-color-outline: #6f797a;
    
    --md-sys-typescale-display-large-font: 'Roboto', system-ui, -apple-system, sans-serif;
    --editor-font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
    
    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;
}

* { box-sizing: border-box; }

/* =========================================
   Global Custom Scrollbars
========================================= */
/* 1. Firefox Standard (W3C) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline) transparent;
}

/* 2. Webkit Engine (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;  /* Vertical scrollbar width */
    height: 8px; /* Horizontal scrollbar height */
}

::-webkit-scrollbar-track {
    background: transparent; /* Seamless blending */
}

::-webkit-scrollbar-thumb {
    background-color: var(--md-sys-color-outline);
    border-radius: 8px;
}

/* Darken slightly when actively hovering or dragging */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background-color: var(--md-sys-color-on-surface);
}

::-webkit-scrollbar-button {
    display: none; /* Kills the ugly up/down arrows */
}

/* =========================================
   Base Layout
========================================= */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-sys-typescale-display-large-font);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none; 
    transition: background-color 0.3s ease, color 0.3s ease;
}

textarea, input, select, [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
}

.display-large { font-size: var(--md-sys-typescale-display-large-size); font-weight: 700; line-height: 64px; margin: 0; }
.title-large { font-size: var(--md-sys-typescale-title-large-size); font-weight: 500; margin: 0; }
.title-medium { font-size: var(--md-sys-typescale-title-medium-size); font-weight: 500; margin: 0; }
.body-large { font-size: var(--md-sys-typescale-body-large-size); }
.label-large { font-size: var(--md-sys-typescale-label-large-size); font-weight: 500; text-transform: uppercase; color: var(--md-sys-color-outline); }

.brand-font {
    font-family: "Supermercado One", cursive !important;
    letter-spacing: 1px;
}

.brand-hero {
    font-size: clamp(64px, 10vw, 100px); 
    line-height: 1.1;
    margin: 0 0 40px 0;
    color: var(--md-sys-color-primary);
}

/* =========================================
   Dark Mode Overrides
========================================= */
[data-theme="dark"] {
    --md-sys-color-primary: #4fd8eb;
    --md-sys-color-on-primary: #00363d;
    --md-sys-color-primary-container: #004f58;
    --md-sys-color-on-primary-container: #97f0ff;
    --md-sys-color-surface: #191c1d;
    --md-sys-color-on-surface: #e1e3e3;
    --md-sys-color-surface-container: #2b2e2f;
    --md-sys-color-surface-container-high: #323536;
    --md-sys-color-outline: #899394;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --md-sys-color-primary: #4fd8eb;
        --md-sys-color-on-primary: #00363d;
        --md-sys-color-primary-container: #004f58;
        --md-sys-color-on-primary-container: #97f0ff;
        --md-sys-color-surface: #191c1d;
        --md-sys-color-on-surface: #e1e3e3;
        --md-sys-color-surface-container: #2b2e2f;
        --md-sys-color-surface-container-high: #323536;
        --md-sys-color-outline: #899394;
    }
}