/*
 * netivi design tokens: the ONE place every --nv-* custom property is declared. Loaded first (before netivi.css on the
 * customer pages, before admin.css on /admin) through BrandAsset::url(). Values are netivi.bz's own (blue #0870CF/#2A8FE8,
 * red #FF0024, near-black #0A0C10). Semantic colours (ok/warn/info/danger/muted) feed the status badges and flags below.
 */
:root {
    --nv-blue-deep: #0870CF; --nv-blue: #2A8FE8; --nv-blue-lift: #57ABF2; --nv-red: #FF0024; --nv-red-lift: #FF3A55;
    --nv-bg: #0A0C10; --nv-surface: #12151B; --nv-raised: #171B23; --nv-line: #242A35; --nv-line-2: #333B49;
    --nv-text: #FFFFFF; --nv-body: #C3C9D4; --nv-muted: #8891A0;
    /* semantic status colours (match the Filament panel palette in AdminPanelProvider) */
    --nv-ok: #2FDCA4; --nv-warn: #FFC043; --nv-info: #57ABF2; --nv-danger: #FF2D4B;
    --nv-radius: 14px; --nv-radius-sm: 10px;
    --nv-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -12px rgba(0, 0, 0, .6);
    --nv-ring: 0 0 0 3px rgba(42, 143, 232, .45);
    --nv-ease: cubic-bezier(.2, .7, .2, 1);
    /* height of the view-as bar (customer pages, admin viewing as a customer); taller when it wraps on phones */
    --nv-as-h: 48px;
}
@media (max-width: 640px) { :root { --nv-as-h: 68px; } }

/* ---------- status badge: text colour from the token, 14% tint of the same token behind it ---------- */
.nv-badge {
    --nv-badge-c: var(--nv-muted);
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 650; line-height: 1.5; white-space: nowrap;
    color: var(--nv-badge-c);
    background: color-mix(in srgb, var(--nv-badge-c) 14%, transparent);
}
.nv-badge__icon { width: 14px; height: 14px; flex: none; }
.nv-badge--success { --nv-badge-c: var(--nv-ok); }
.nv-badge--warning { --nv-badge-c: var(--nv-warn); }
.nv-badge--info { --nv-badge-c: var(--nv-info); }
.nv-badge--danger { --nv-badge-c: var(--nv-danger); }
.nv-badge--gray { --nv-badge-c: var(--nv-muted); }
.nv-badge--primary { --nv-badge-c: var(--nv-blue); }

/* ---------- flag: icon-only marker, the icon drawn in the badge colour so kinds differ by shape as well as hue ---------- */
.nv-flag {
    --nv-flag-c: var(--nv-muted);
    display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: none;
    vertical-align: -2px; color: var(--nv-flag-c);
}
.nv-flag svg { width: 14px; height: 14px; display: block; }
.nv-flag--success { --nv-flag-c: var(--nv-ok); }
.nv-flag--warning { --nv-flag-c: var(--nv-warn); }
.nv-flag--info { --nv-flag-c: var(--nv-info); }
.nv-flag--danger { --nv-flag-c: var(--nv-danger); }
.nv-flag--gray { --nv-flag-c: var(--nv-muted); }
.nv-flag--primary { --nv-flag-c: var(--nv-blue); }