:root {
    --ui-brand: #1b84ff;
    --ui-brand-hover: #0f6fe5;
    --ui-brand-soft: #e8f3ff;
    --ui-navigation: #0f172a;
    --ui-navigation-hover: #1e293b;
    --ui-canvas: #f4f6fa;
    --ui-surface: #ffffff;
    --ui-surface-raised: #f8fbff;
    --ui-input: #f1f1f4;
    --ui-text: #071437;
    --ui-text-muted: #4b5675;
    --ui-text-subtle: #78829d;
    --ui-border: #e1e3ea;
    --ui-focus: rgba(27, 132, 255, .24);
    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --ui-shadow-md: 0 8px 24px rgba(15, 23, 42, .10);
}

html[data-bs-theme="dark"],
html[data-theme-mode="dark"],
html.admin-v2-dark {
    --ui-brand: #5aa7ff;
    --ui-brand-hover: #80bbff;
    --ui-brand-soft: #172d46;
    --ui-navigation: #0b1220;
    --ui-navigation-hover: #111827;
    --ui-canvas: #0b0e14;
    --ui-surface: #151a24;
    --ui-surface-raised: #1c2230;
    --ui-input: #1c2230;
    --ui-text: #e8ecf8;
    --ui-text-muted: #c5cee0;
    --ui-text-subtle: #929db5;
    --ui-border: #2a3145;
    --ui-focus: rgba(90, 167, 255, .35);
    --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, .18);
    --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, .24);
}

:root {
    --refresh-navy: var(--ui-navigation, #0f172a);
    --refresh-navy-soft: var(--ui-navigation-hover, #1e293b);
    --refresh-ink: var(--ui-text, #071437);
    --refresh-accent: var(--ui-brand, #1b84ff);
    --refresh-accent-soft: var(--ui-brand-hover, #0f6fe5);
    --refresh-canvas: var(--ui-canvas, #f4f6fa);
    --refresh-card: var(--ui-surface, #ffffff);
    --refresh-input: var(--ui-input, #f1f1f4);
    --refresh-input-muted: var(--ui-surface-raised, #f8fbff);
    --refresh-hairline: var(--ui-border, #e1e3ea);
    --refresh-radius: var(--ui-radius-md, 12px);
}

:root {
    --admin-v2-blue: var(--ui-brand, #1b84ff);
    --admin-v2-ink: var(--ui-text, #071437);
    --admin-v2-muted: var(--ui-text-muted, #4b5675);
    --admin-v2-line: var(--ui-border, #e1e3ea);
    --admin-v2-page: var(--ui-canvas, #f4f6fa);
    --admin-v2-surface: var(--ui-surface, #ffffff);
    --admin-v2-surface-2: var(--ui-surface-raised, #f8fbff);
    --admin-v2-input: var(--ui-input, #f1f1f4);
    --admin-v2-hover: var(--ui-surface-raised, #f8fbff);
}

html[data-bs-theme="dark"], html[data-theme-mode="dark"], html.admin-v2-dark {
    color-scheme: dark;
}

:where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}