/* Shared visual tokens only. Page components stay in style.css/admin.css. */
:root {
    --sys-color-page: #f1f3f6;
    --sys-color-surface: #ffffff;
    --sys-color-surface-subtle: #f8f9fb;
    --sys-color-surface-muted: #eef1f5;
    --sys-color-surface-elevated: #ffffff;
    --sys-color-surface-hover: #f6f7f9;
    --sys-color-surface-selected: #edf2ff;
    --sys-color-border: #dbe1e9;
    --sys-color-border-strong: #c6cfdb;
    --sys-color-border-hover: #b7c2d1;
    --sys-color-border-selected: #9db1f6;
    --sys-color-focus: #3f66dc;
    --sys-focus-ring: 0 0 0 3px rgba(63, 102, 220, 0.15);

    --sys-color-text: #162035;
    --sys-color-text-secondary: #46566d;
    /* Small explanatory text stays readable on white and off-white surfaces. */
    --sys-color-text-tertiary: #59677b;
    --sys-color-text-inverse: #ffffff;

    --sys-color-primary: #3f66dc;
    --sys-color-primary-hover: #3157c5;
    --sys-color-primary-soft: #eef3ff;
    --sys-color-accent: #6288ef;
    --sys-color-accent-soft: #f2f5ff;

    --sys-color-success: #027a48;
    --sys-color-success-soft: #ecfdf3;
    --sys-color-warning: #b54708;
    --sys-color-warning-soft: #fffaeb;
    --sys-color-danger: #b42318;
    --sys-color-danger-soft: #fef3f2;
    --sys-color-info: #175cd3;
    --sys-color-info-soft: #eff6ff;

    --sys-shadow-xs: 0 2px 8px rgba(31, 45, 72, 0.04);
    --sys-shadow-sm: 0 8px 22px rgba(27, 39, 65, 0.055), 0 2px 5px rgba(27, 39, 65, 0.03);
    --sys-shadow-md: 0 16px 38px rgba(27, 39, 65, 0.075), 0 3px 10px rgba(27, 39, 65, 0.04);
    --sys-shadow-panel: 0 18px 46px rgba(27, 39, 65, 0.08), 0 3px 12px rgba(27, 39, 65, 0.035);
    --sys-shadow-card-hover: 0 12px 28px rgba(27, 39, 65, 0.09), 0 3px 8px rgba(27, 39, 65, 0.035);
    --sys-shadow-popover: 0 14px 38px rgba(20, 31, 52, 0.14), 0 4px 12px rgba(20, 31, 52, 0.06);
    --sys-shadow-dialog: 0 24px 72px rgba(20, 31, 52, 0.18), 0 8px 24px rgba(20, 31, 52, 0.07);

    --sys-radius-xs: 8px;
    --sys-radius-sm: 10px;
    --sys-radius-md: 14px;
    --sys-radius-lg: 18px;
    --sys-radius-xl: 22px;
    --sys-radius-2xl: 28px;
    --sys-radius-control: 14px;
    --sys-radius-card: 20px;
    --sys-radius-full: 9999px;

    --sys-space-1: 4px;
    --sys-space-2: 8px;
    --sys-space-3: 12px;
    --sys-space-4: 16px;
    --sys-space-6: 24px;
    --sys-space-8: 32px;

    --sys-control-sm: 32px;
    --sys-control-md: 40px;
    --sys-control-lg: 44px;
    --sys-control-xl: 46px;
    --sys-touch-target: 44px;

    --sys-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --sys-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --sys-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --sys-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

    --sys-motion-instant: 100ms var(--sys-ease-standard);
    --sys-motion-fast: 180ms var(--sys-ease-standard);
    --sys-motion-base: 200ms var(--sys-ease-out);
    --sys-motion-dialog: 240ms var(--sys-ease-out);
    --sys-motion-exit: 180ms var(--sys-ease-in);
    --sys-stagger-fast: 40ms;
    --sys-stagger-normal: 60ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sys-motion-instant: 1ms linear;
        --sys-motion-fast: 1ms linear;
        --sys-motion-base: 1ms linear;
        --sys-motion-dialog: 1ms linear;
        --sys-motion-exit: 1ms linear;
        --sys-stagger-fast: 0ms;
        --sys-stagger-normal: 0ms;
    }
}