:root {
    --bg: #f7f9fc;
    --surface: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --border: #e2e8f0;
    --primary: #2563eb;
    --spacing-l: 15px;
    --spacing-m: 10px;
    --spacing-s: 5px;
    --sidebar-width: 280px;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #0b0f17;
        --surface: #141a24;
        --text: #e6edf3;
        --muted: #93a1b1;
        --primary: #4f8cff;
        --border: #233045;
    }
}

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

html,
body {
    height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: var(--spacing-m);
}

p {
    margin: var(--spacing-s);
}

button {
    padding: var(--spacing-s);
    /*margin: var(--spacing-m);*/

    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
}

button:hover {
    background: var(--surface);

    cursor: pointer;
}

[contenteditable="true"] {
    border: 1px solid var(--border);
}

body {
    display: grid;
    gap: var(--spacing-l);
    grid-template-areas:
        "header"
        "user"
        "nav"
        "main";

    margin: 0;
    padding: var(--spacing-l);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

header {
    grid-area: header;

    padding: var(--spacing-m);

    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

aside {
    padding: var(--spacing-m);

    overflow: hidden;

    background: var(--surface);
    border-right: 1px solid var(--border);
}

#user {
    grid-area: user;
}

#nav {
    grid-area: nav;
}

nav {
    height: 100%;

    overflow-y: auto;
}

main {
    grid-area: main;
}

@media (width >= 500px) {
    body {
        grid-template-columns: var(--sidebar-width) 3fr;
        grid-template-areas:
            "header header"
            "user   main"
            "nav    main";
    }
}