/*
 * AirAdmin shared design tokens.
 *
 * This file is the single visual baseline for the gradual UI redesign. Existing
 * app/admin/agent/store variables should map to these tokens while legacy pages
 * are migrated in small, reversible steps.
 */
:root {
    color-scheme: light;

    /* Typography */
    --ui-font-sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --ui-font-size-xs: 12px;
    --ui-font-size-sm: 14px;
    --ui-font-size-md: 16px;
    --ui-font-size-lg: 18px;
    --ui-font-size-xl: 22px;
    --ui-line-height-tight: 1.25;
    --ui-line-height-base: 1.6;

    /* Spacing */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-space-10: 40px;

    /* Radius */
    --ui-radius-xs: 6px;
    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 18px;
    --ui-radius-xl: 24px;
    --ui-radius-2xl: 28px;
    --ui-radius-pill: 999px;

    /* Core palette */
    --ui-color-bg: #eef4fb;
    --ui-color-bg-soft: #f7fbff;
    --ui-color-bg-muted: #f6f9fd;
    --ui-color-surface: #ffffff;
    --ui-color-surface-alpha: rgba(255, 255, 255, 0.94);
    --ui-color-surface-soft: #f6f9fd;
    --ui-color-border: rgba(25, 69, 105, 0.12);
    --ui-color-border-strong: rgba(25, 69, 105, 0.22);
    --ui-color-text: #183153;
    --ui-color-text-muted: #546f8a;
    --ui-color-text-soft: #7d93aa;
    --ui-color-text-inverse: #ffffff;

    /* Brand and semantic states */
    --ui-color-primary: #1d5fd0;
    --ui-color-primary-hover: #0f3f92;
    --ui-color-primary-soft: rgba(29, 95, 208, 0.12);
    --ui-color-success: #2c9b6f;
    --ui-color-warning: #c88a17;
    --ui-color-danger: #d94f70;
    --ui-color-danger-hover: #b43857;
    --ui-color-info: #127dc1;

    /* Chrome */
    --ui-chrome-bg: linear-gradient(180deg, #0f223d 0%, #122b4b 48%, #112744 100%);
    --ui-chrome-bg-store: linear-gradient(180deg, #2c3e50 0%, #1a2530 100%);
    --ui-chrome-divider: rgba(145, 173, 206, 0.14);

    /* Elevation */
    --ui-shadow-sm: 0 8px 20px rgba(16, 36, 63, 0.06);
    --ui-shadow-md: 0 14px 32px rgba(16, 36, 63, 0.08);
    --ui-shadow-lg: 0 24px 52px rgba(16, 36, 63, 0.12);

    /* Breakpoints documented for CSS authors. CSS custom properties are not
       usable inside media queries, so these values are mirrored in docs. */
    --ui-breakpoint-sm: 480px;
    --ui-breakpoint-md: 768px;
    --ui-breakpoint-lg: 1024px;
    --ui-breakpoint-xl: 1200px;
}