:root {
    --club-primary: #005bbb;
    --club-primary-dark: #004494;
    --club-accent: #f2c100;
    --club-accent-dark: #d8aa00;

    --ui-bg: #eef3fa;
    --ui-bg-soft: #f7f9fd;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f4f7fc;
    --ui-border: #d8e1f0;
    --ui-border-strong: #c4d2e8;
    --ui-text: #14233f;
    --ui-text-muted: #637190;
    --ui-text-subtle: #8d98b0;

    --ui-sidebar-bg: #112d56;
    --ui-sidebar-bg-2: #0d2344;
    --ui-sidebar-border: rgba(255, 255, 255, 0.14);
    --ui-sidebar-text: rgba(248, 251, 255, 0.9);
    --ui-sidebar-text-muted: rgba(222, 231, 247, 0.68);

    --ui-success: #1f8a5b;
    --ui-warning: #c0841f;
    --ui-danger: #cc3c3c;
    --ui-info: #3478c7;

    --ui-shadow-sm: 0 8px 20px rgba(14, 37, 76, 0.08);
    --ui-shadow-md: 0 18px 38px rgba(13, 36, 76, 0.12);
    --ui-shadow-lg: 0 26px 56px rgba(9, 28, 65, 0.18);

    --ui-radius-xs: 8px;
    --ui-radius-sm: 12px;
    --ui-radius-md: 16px;
    --ui-radius-lg: 20px;
    --ui-radius-xl: 24px;
    --ui-radius-pill: 999px;

    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.25rem;
    --ui-space-6: 1.5rem;
    --ui-space-7: 1.75rem;
    --ui-space-8: 2rem;
    --ui-touch-target-min: 44px;

    --ui-sidebar-width: 204px;
    --ui-sidebar-collapsed-width: 64px;
    --ui-topbar-height: 82px;
    --ui-z-sidebar: 1000;
    --ui-z-topbar: 900;
    --ui-z-backdrop: 850;
    --ui-z-modal: 1200;
}

html {
    font-size: 90%;
}

html,
body {
    font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif;
    color: var(--ui-text);
    background:
        radial-gradient(circle at 12% -2%, rgba(0, 91, 187, 0.12) 0%, rgba(0, 91, 187, 0) 42%),
        radial-gradient(circle at 88% 102%, rgba(242, 193, 0, 0.14) 0%, rgba(242, 193, 0, 0) 45%),
        var(--ui-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.top-title,
.ui-title-section {
    font-family: "Barlow Condensed", "Source Sans 3", Arial, sans-serif;
    letter-spacing: 0.02em;
}

body.layout-nav-open {
    overflow: hidden;
}

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