:root {
    --color-bg: #f3f6fb;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-border: #dbe3ef;
    --color-border-strong: #c8d4e3;

    --color-text: #18212f;
    --color-text-muted: #64748b;
    --color-text-soft: #94a3b8;

    --color-primary: #1f4e8c;
    --color-primary-hover: #183f72;
    --color-primary-soft: #e8f0fb;

    --color-success: #dff7e8;
    --color-success-text: #18794e;

    --color-warning: #fff4dc;
    --color-warning-text: #9a6700;

    --color-info: #e7f1ff;
    --color-info-text: #1d4ed8;

    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;

    --sidebar-width: 270px;
    --topbar-height: 84px;

    --transition: 0.25s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition);
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
    background: var(--color-primary-hover);
}

.btn--secondary {
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn--secondary:hover {
    background: var(--color-surface-soft);
}

.text-link {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary);
}

.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.status--success {
    background: var(--color-success);
    color: var(--color-success-text);
}

.status--warning {
    background: var(--color-warning);
    color: var(--color-warning-text);
}

.status--info {
    background: var(--color-info);
    color: var(--color-info-text);
}