/*
 * MosVPN design tokens
 *
 * This is the single source of truth for the admin and customer surfaces.
 * Keep component styles semantic: consume these variables instead of adding
 * one-off colors, spacing, radii, or shadows in component files.
 */
:root {
    color-scheme: light;

    /* Neutral palette */
    --mos-color-neutral-0: #ffffff;
    --mos-color-neutral-50: #fafafa;
    --mos-color-neutral-100: #f4f4f5;
    --mos-color-neutral-200: #e4e4e7;
    --mos-color-neutral-300: #d4d4d8;
    --mos-color-neutral-400: #a1a1aa;
    --mos-color-neutral-500: #71717a;
    --mos-color-neutral-600: #52525b;
    --mos-color-neutral-700: #3f3f46;
    --mos-color-neutral-800: #27272a;
    --mos-color-neutral-900: #18181b;

    /* MosVPN accent scale. Red is reserved for actions and active states. */
    --mos-color-red-50: #fff1f2;
    --mos-color-red-100: #ffe4e6;
    --mos-color-red-200: #fecdd3;
    --mos-color-red-300: #fda4af;
    --mos-color-red-400: #fb7185;
    --mos-color-red-500: #d32235;
    --mos-color-red-600: #b91c32;
    --mos-color-red-700: #9f1230;
    --mos-color-red-800: #881337;
    --mos-color-red-900: #4c0519;

    /* Semantic colors stay distinct from the MosVPN accent. */
    --mos-color-success-50: #f0fdf4;
    --mos-color-success-500: #15803d;
    --mos-color-success-700: #166534;
    --mos-color-success-border: #bbf7d0;
    --mos-color-warning-50: #fffbeb;
    --mos-color-warning-500: #b45309;
    --mos-color-warning-700: #92400e;
    --mos-color-warning-border: #fde68a;
    --mos-color-danger-50: #fff7ed;
    --mos-color-danger-500: #c2410c;
    --mos-color-danger-700: #9a3412;
    --mos-color-danger-border: #fed7aa;
    --mos-color-info-50: #eff6ff;
    --mos-color-info-500: #2563eb;
    --mos-color-info-700: #1d4ed8;
    --mos-color-info-border: #bfdbfe;

    /* Surfaces and interaction */
    --mos-color-bg: var(--mos-color-neutral-50);
    --mos-color-surface: var(--mos-color-neutral-0);
    --mos-color-surface-muted: var(--mos-color-neutral-100);
    --mos-color-surface-raised: var(--mos-color-neutral-0);
    --mos-color-text: var(--mos-color-neutral-800);
    --mos-color-text-muted: var(--mos-color-neutral-600);
    --mos-color-text-subtle: var(--mos-color-neutral-500);
    --mos-color-border: var(--mos-color-neutral-200);
    --mos-color-border-strong: var(--mos-color-neutral-300);
    --mos-color-overlay: rgba(24, 24, 27, .52);
    --mos-shadow-xs: 0 1px 2px rgba(24, 24, 27, .04);
    --mos-shadow-sm: 0 2px 8px rgba(24, 24, 27, .06);
    --mos-shadow-md: 0 8px 24px rgba(24, 24, 27, .08);

    /* Typography */
    --mos-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mos-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --mos-font-size-display: 2.25rem;
    --mos-font-size-h1: 1.75rem;
    --mos-font-size-h2: 1.375rem;
    --mos-font-size-body: .9375rem;
    --mos-font-size-small: .8125rem;
    --mos-font-size-caption: .6875rem;
    --mos-line-height-display: 1.1;
    --mos-line-height-heading: 1.25;
    --mos-line-height-body: 1.5;
    --mos-line-height-tight: 1.25;
    --mos-letter-spacing-display: -.04em;
    --mos-letter-spacing-heading: -.02em;
    --mos-letter-spacing-body: 0;
    --mos-letter-spacing-caption: .01em;

    /* 4px spacing scale */
    --mos-space-0: 0;
    --mos-space-1: 4px;
    --mos-space-2: 8px;
    --mos-space-3: 12px;
    --mos-space-4: 16px;
    --mos-space-5: 20px;
    --mos-space-6: 24px;
    --mos-space-8: 32px;
    --mos-space-12: 48px;

    /* Component geometry */
    --mos-radius-control: 8px;
    --mos-radius-card: 12px;
    --mos-radius-panel: 16px;
    --mos-radius-pill: 999px;
    --mos-border-width: 1px;
    --mos-active-indicator-width: 3px;
    --mos-sidebar-width: 260px;
    --mos-sidebar-collapsed-width: 64px;
    --mos-drawer-width: min(86vw, 320px);
    --mos-topbar-height: 56px;
    --mos-control-height-xs: 32px;
    --mos-control-height-sm: 36px;
    --mos-control-height-md: 40px;
    --mos-control-height-lg: 48px;
    --mos-search-width: 280px;
    --mos-table-label-width: 42%;
    --mos-locale-width-mobile: 124px;
    --mos-theme-control-width: 152px;
    --mos-complex-table-min-width: 960px;
    --mos-order-table-min-width: 1120px;
    --mos-date-time-column-width: 168px;
    --mos-stat-value-size: 2rem;
    --mos-hero-value-size: 2.75rem;
    --mos-sparkline-height: 28px;
    --mos-stat-card-min-height: 148px;
    --mos-empty-state-min-height: 180px;
    --mos-empty-copy-max-width: 420px;
    --mos-page-hero-min-height: 160px;
    --mos-page-hero-copy-max-width: 720px;
    --mos-dashboard-chart-min-height: 280px;
    --mos-dashboard-side-min-width: 320px;
    --mos-overflow-menu-width: 220px;
    --mos-disabled-opacity: .56;
    --mos-pressed-opacity: .88;
    --mos-skeleton-duration: 1.4s;
    --mos-skeleton-background-size: 200% 100%;
    --mos-skeleton-value-width: 70%;
    --mos-content-max-width: 1280px;
    --mos-content-padding: var(--mos-space-6);
    --mos-icon-size: 18px;
    --mos-icon-stroke: 1.5;
    --mos-font-weight-normal: 400;
    --mos-font-weight-medium: 500;
    --mos-font-weight-semibold: 600;
    --mos-font-weight-bold: 700;
    --mos-z-sticky-cell: 2;
    --mos-z-sticky-header: 4;
    --mos-z-sticky-corner: 6;
    --mos-z-toast: 1200;
    --mos-motion-fast: 150ms ease-out;
    --mos-motion-emphasized: 260ms cubic-bezier(.2, .8, .2, 1);
    --mos-focus-ring: 0 0 0 3px rgba(211, 34, 53, .24);
    --mos-focus-outline-width: 2px;
    --mos-focus-outline-offset: 2px;
    --mos-tabular-nums: tabular-nums;
    --brand-color: var(--mos-color-red-500);

    /* Compatibility aliases consumed by the existing presentation layer. */
    --mos-red: var(--mos-color-red-500);
    --mos-red-dark: var(--mos-color-red-600);
    --mos-red-soft: var(--mos-color-red-50);
    --mos-red-pale: var(--mos-color-red-50);
    --mos-navy: var(--mos-color-text);
    --mos-muted: var(--mos-color-text-muted);
    --mos-bg: var(--mos-color-bg);
    --mos-card: var(--mos-color-surface);
    --mos-border: var(--mos-color-border);
    --mos-shadow: var(--mos-shadow-md);
    --mos-shadow-hover: 0 10px 28px rgba(24, 24, 27, .10);
}

/* An explicit theme attribute always wins over the system preference. */
html[data-mosvpn-theme="light"] {
    color-scheme: light;
}

html[data-mosvpn-theme="dark"],
html.mosvpn-dark {
    color-scheme: dark;
    --mos-color-bg: #0b0b0d;
    --mos-color-surface: #161619;
    --mos-color-surface-muted: #1f1f23;
    --mos-color-surface-raised: #202024;
    --mos-color-text: #f4f4f5;
    --mos-color-text-muted: #d4d4d8;
    --mos-color-text-subtle: #a1a1aa;
    --mos-color-border: rgba(255, 255, 255, .08);
    --mos-color-border-strong: rgba(255, 255, 255, .14);
    --mos-color-red-50: #2f1018;
    --mos-color-red-100: #3a121b;
    --mos-color-success-50: #0c2417;
    --mos-color-success-500: #4ade80;
    --mos-color-success-700: #86efac;
    --mos-color-success-border: #1f5133;
    --mos-color-warning-50: #2b1d09;
    --mos-color-warning-500: #f59e0b;
    --mos-color-warning-700: #fcd34d;
    --mos-color-warning-border: #5f4213;
    --mos-color-danger-50: #2d160c;
    --mos-color-danger-500: #fb923c;
    --mos-color-danger-700: #fdba74;
    --mos-color-danger-border: #6c3217;
    --mos-color-info-50: #0e1c35;
    --mos-color-info-500: #60a5fa;
    --mos-color-info-700: #93c5fd;
    --mos-color-info-border: #1e3a68;
    --mos-color-overlay: rgba(0, 0, 0, .68);
    --mos-shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
    --mos-shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);
    --mos-shadow-md: 0 8px 24px rgba(0, 0, 0, .34);
    --mos-red-soft: #3a121b;
    --mos-red-pale: #281016;
    --mos-focus-ring: 0 0 0 3px rgba(251, 113, 133, .30);
}

@media (prefers-color-scheme: dark) {
    html:not([data-mosvpn-theme]) {
        color-scheme: dark;
        --mos-color-bg: #0b0b0d;
        --mos-color-surface: #161619;
        --mos-color-surface-muted: #1f1f23;
        --mos-color-surface-raised: #202024;
        --mos-color-text: #f4f4f5;
        --mos-color-text-muted: #d4d4d8;
        --mos-color-text-subtle: #a1a1aa;
        --mos-color-border: rgba(255, 255, 255, .08);
        --mos-color-border-strong: rgba(255, 255, 255, .14);
        --mos-color-overlay: rgba(0, 0, 0, .68);
        --mos-shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
        --mos-shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);
        --mos-shadow-md: 0 8px 24px rgba(0, 0, 0, .34);
        --mos-red-soft: #3a121b;
        --mos-red-pale: #281016;
    }
}

/* Shared primitives used by both compiled themes and custom surfaces. */
*,
*::before,
*::after {
    scrollbar-color: var(--mos-color-border-strong) transparent;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--mos-focus-outline-width) solid var(--mos-color-red-500);
    outline-offset: var(--mos-focus-outline-offset);
    box-shadow: var(--mos-focus-ring);
}

body {
    font-family: var(--mos-font-family);
    font-size: var(--mos-font-size-body);
    line-height: var(--mos-line-height-body);
}

:where(h1, h2, h3, h4, h5, h6) {
    letter-spacing: var(--mos-letter-spacing-heading);
    text-transform: none;
}

:where(.mosvpn-number, .mosvpn-stat-value, .ant-statistic-content, .v2board-stat-value) {
    font-variant-numeric: var(--mos-tabular-nums);
}

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