:root {
    --bg-base: #101316;
    --bg-surface: #1a1f24;
    --bg-elevated: #2a3138;

    --text-primary: #f0f2f5;
    --text-secondary: #aab0b8;
    --text-muted: #7c838c;

    --accent-royal-blue: #5d8bef;
    --accent-gold-ochre: #e1a33b;
    --accent-crimson-red: #e96d6d;
    --accent-pine-green: #4caf80;
    --accent-indigo: #8e9aef;

    --highlight-info: #30567a;
    --highlight-success: #2f6f4e;

    --border-color: #39424c;
}

[data-theme='light'] {
    --bg-base: #f8f9fa;
    --bg-surface: #e8edf2;
    --bg-elevated: #d7dee6;

    --text-primary: #1b1f23;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;

    --accent-royal-blue: #2f5aad;
    --accent-gold-ochre: #c2881e;
    --accent-crimson-red: #b53a3a;
    --accent-pine-green: #2d6a4f;
    --accent-indigo: #5c6ac4;

    --highlight-info: #b4d0f8;
    --highlight-success: #c8e6c9;

    --border-color: #cbd5e1;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

[data-theme='dark'] body {
    background: var(--bg-base);
}

[data-theme='dark'] body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
            -45deg,
            var(--highlight-info),
            var(--accent-indigo) 0.5pt,
            #0000 0 56pt
        ),
        repeating-linear-gradient(
            -45deg,
            var(--highlight-info),
            var(--accent-pine-green) 0.5pt,
            #0000 0 32pt
        );
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
}

body > div {
    display: flex;
    height: 100%;
}

.container {
    background-color: var(--bg-surface);
    border: 1px solid var(border-color);
    padding: 8px;
    border-radius: 4px;
    max-width: 1240px;
    margin: 0 auto;
}

.main_item--ctr {
    max-width: 1240px;
    margin: 0 auto;
    overflow: hidden;
}

button {
    color: unset;
}

p {
    margin-block: 0;
    margin-block-end: 0;
}

* {
    color: var(--color-font);
}

*:focus-visible {
    outline: 2px solid var(--accent-indigo);
}