:root {
    color-scheme: light dark;

    /* Typography */
    --app-font-family: "Patrick Hand", "Segoe Print", cursive;

    /* Brand */
    --color-brand: #445f87;
    --color-brand-strong: #324c73;

    /* Content */
    --color-text: #2a3b52;
    --color-text-muted: #6c7a8c;
    --color-text-subtle: #8793a3;
    --color-text-inverse: #ffffff;


    /* Backgrounds & Surfaces */
    --color-background: #ffffff;
    --color-surface: #f5f7fb;
    --color-surface-muted: #f5f7f9;
    --color-surface-subtle: #f8fbff;
    --color-surface-hover: #eef4fb;
    --color-surface-active: #e6edf8;
    --color-surface-overlay: rgba(255, 255, 255, 0.8);

    /* Navigation Bar */
    --color-nav-background: var(--color-surface);

    /* Borders */
    --color-border: #dce1e8;
    --color-border-subtle: #eaedf1;
    --color-border-control: #cfd8e3;
    --color-border-settings: #c7d3e5;
    --color-border-hover: #9fb3cf;
    --color-border-neutral: #cfd5dd;

    /* States */
    --color-focus: #6f8fbd;
    --color-success: #4fb578;
    --color-error: #b55648;
    --color-danger: #c43d3d;

    /* Ink */
    --color-ink: #000000;

    /* Overlays */
    --color-overlay: rgba(26, 39, 56, 0.35);

    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.16);
    --shadow-color-soft: rgba(0, 0, 0, 0.10);
    --shadow-color-subtle: rgba(0, 0, 0, 0.06);
    --shadow-brand: rgba(68, 95, 135, 0.08);
    --shadow-brand-medium: rgba(68, 95, 135, 0.14);
    --shadow-drawer: rgba(26, 39, 56, 0.18);
    --shadow-typing: rgba(0, 0, 0, 0.1);

}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* Brand */
        --color-brand: #9eb9e3;
        --color-brand-strong: #c1d3f0;

        /* Content */
        --color-text: #e6edf7;
        --color-text-muted: #aebbd0;
        --color-text-subtle: #8190a5;
        --color-text-inverse: #111a25;

        /* Backgrounds & Surfaces */
        --color-background: #111a25;
        --color-surface: #192535;
        --color-surface-muted: #1d2a3b;
        --color-surface-subtle: #151f2e;
        --color-surface-hover: #25364b;
        --color-surface-active: #2e435c;
        --color-surface-overlay: rgba(25, 37, 53, 0.94);

        /* Navigation Bar */
        --color-nav-background: var(--color-background);

        /* Borders */
        --color-border: #35485f;
        --color-border-subtle: #29394d;
        --color-border-control: #475d77;
        --color-border-settings: #475d77;
        --color-border-hover: #718caf;
        --color-border-neutral: #62758c;

        /* States */
        --color-focus: #a8c4ed;
        --color-success: #75d69c;
        --color-error: #f08c7f;
        --color-danger: #ff8585;

        /* Ink */
        --color-ink: #f4f7fb;

        /* Overlays */
        --color-overlay: rgba(3, 8, 16, 0.64);

        /* Shadows */
        --shadow-color: rgba(0, 0, 0, 0.80);
        --shadow-color-soft: rgba(0, 0, 0, 0.55);
        --shadow-color-subtle: rgba(0, 0, 0, 0.35);
        --shadow-brand: rgba(0, 0, 0, 0.24);
        --shadow-brand-medium: rgba(0, 0, 0, 0.38);
        --shadow-drawer: rgba(0, 0, 0, 0.50);
        --shadow-typing: rgba(0, 0, 0, 0.35);
    }
}

html,
body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--app-font-family);
}

button,
input,
select,
textarea {
    color: var(--color-text);
    font-family: inherit;
}