:root {
    color-scheme: light;
    --np-color-page: #f4f6f8;
    --np-color-surface: #ffffff;
    --np-color-surface-muted: #eef1f4;
    --np-color-text: #15181c;
    --np-color-text-muted: #606873;
    --np-color-border: #d9dee5;
    --np-color-brand: #d71920;
    --np-color-brand-strong: #a90f15;
    --np-color-info: #1769aa;
    --np-color-success: #16834b;
    --np-color-warning: #b96600;
    --np-color-danger: #c62828;
    --np-shadow-soft: 0 8px 24px rgba(20, 27, 35, 0.08);
    --np-radius-sm: 4px;
    --np-radius-md: 8px;
    --np-space-1: 4px;
    --np-space-2: 8px;
    --np-space-3: 12px;
    --np-space-4: 16px;
    --np-space-5: 24px;
    --np-space-6: 32px;
    --np-space-7: 48px;
    --np-container: 1440px;
    --np-header-height: 64px;
    --np-mobile-nav-height: 64px;
    --np-focus-ring: 0 0 0 3px rgba(23, 105, 170, 0.28);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --np-color-page: #080a0c;
    --np-color-surface: #101316;
    --np-color-surface-muted: #171b1f;
    --np-color-text: #f4f6f8;
    --np-color-text-muted: #a9b0b8;
    --np-color-border: #2a3036;
    --np-color-brand: #ef3138;
    --np-color-brand-strong: #ff4b51;
    --np-color-info: #66aee8;
    --np-color-success: #52b77d;
    --np-color-warning: #e6a24b;
    --np-color-danger: #ff666b;
    --np-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.28);
    --np-focus-ring: 0 0 0 3px rgba(102, 174, 232, 0.34);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}