:root {
    --brand-red: #b53122;
    --brand-red-dark: #7e1f16;
    --brand-red-deep: #5f140f;
    --brand-red-soft: rgba(181, 49, 34, 0.12);
    --brand-red-soft-strong: rgba(181, 49, 34, 0.2);
    --brand-ink: #0f1216;
    --brand-ink-soft: #1a1f27;
    --brand-slate: #556274;
    --brand-surface: #f8fafc;
    --brand-surface-soft: #eef2f6;
    --brand-border: rgba(148, 163, 184, 0.2);
    --brand-white: #ffffff;
    --brand-shadow: 0 18px 40px rgba(15, 18, 22, 0.12);
    --brand-gradient: linear-gradient(135deg, var(--brand-red-deep) 0%, var(--brand-red-dark) 44%, var(--brand-red) 100%);
    --brand-dark-gradient: linear-gradient(90deg, #742117 0%, #4a1913 34%, #1b2129 74%, #0f1216 100%);
    --brand-surface-gradient: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);

    --primary-gradient: var(--brand-gradient);
    --success-gradient: linear-gradient(135deg, #136f41 0%, #23a26d 100%);
    --warning-gradient: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    --info-gradient: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    --navbar-gradient: var(--brand-dark-gradient);
    --sidebar-bg: linear-gradient(180deg, #9a2d1f 0%, #642016 20%, #2a1d1f 58%, #11151b 100%);
    --hover-bg: rgba(255, 255, 255, 0.08);
    --active-bg: rgba(181, 49, 34, 0.24);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-main: #101828;
    --text-muted: #64748b;
    --border-radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}