:root {
    --font-display: "Sora", "Segoe UI", sans-serif;
    --font-body: "Manrope", "Segoe UI", sans-serif;

    --bg-page: #f2f6fb;
    --bg-card: #ffffff;
    --bg-soft: #ecf2fa;
    --bg-strong: #0f2d4f;

    --text-main: #10263f;
    --text-soft: #55728f;
    --text-on-strong: #eef6ff;

    --line: #d8e4f2;

    --accent: #0f7a5c;
    --accent-alt: #e8953a;
    --danger: #c63f52;
    --info: #2a6fc4;

    --ok-bg: #def7ed;
    --ok-text: #0d6b4f;

    --warn-bg: #fff0dc;
    --warn-text: #8f4d04;

    --wait-bg: #ffe9eb;
    --wait-text: #8f2234;

    --shadow-soft: 0 14px 30px rgba(16, 38, 63, 0.08);
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --sidebar-w: 228px;
    --topbar-h: 56px;
    --panel-padding: 12px;
    --space-2xs: 4px;
    --space-xs: 6px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --font-xs: .74rem;
    --font-sm: .82rem;
    --font-md: .9rem;
    --font-lg: 1.1rem;
    --font-xl: 1.28rem;
    --control-h: 36px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--font-display);
}

.hidden {
    display: none !important;
}

.muted {
    color: var(--text-soft);
}