:root {
    --public-font-sans: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    --public-bg: #eef2f6;
    --public-surface: #ffffff;
    --public-surface-muted: #f7f9fb;
    --public-border: rgba(15, 34, 51, 0.1);
    --public-border-strong: rgba(15, 34, 51, 0.16);
    --public-text: #102132;
    --public-text-muted: #5f7488;
    --public-primary: #021b35;
    --public-accent: #fdb10d;
    --public-navbar-height: 64px;
    --public-navbar-offset: var(--public-navbar-height);
    --public-shadow-sm: 0 4px 12px rgba(15, 34, 51, 0.035);
    --public-shadow-md: 0 10px 24px rgba(15, 34, 51, 0.075);
    --public-radius-md: 0.55rem;
    --public-radius-lg: 0.75rem;
    --public-elevated-surface-bg: rgba(255, 255, 255, 0.94);
    --public-elevated-surface-border: 1px solid rgba(15, 34, 51, 0.08);
    --public-elevated-surface-radius: 0.72rem;
    --public-elevated-surface-shadow: 0 6px 16px rgba(16, 33, 50, 0.07);
    --public-elevated-surface-shadow-hover: 0 10px 24px rgba(16, 33, 50, 0.1);
    --public-count-badge-min-height: 2rem;
    --public-count-badge-padding: 0.28rem 0.55rem;
    --public-count-badge-radius: 0.42rem;
    --public-count-badge-bg: rgba(13, 90, 167, 0.14);
    --public-count-badge-color: #0d5aa7;
    --public-count-badge-font-size: 0.84rem;
    --public-count-badge-font-weight: 500;
}

@media (max-width: 767.98px) {
    :root {
        --public-navbar-height: 62px;
    }
}