/* 先知命局 · Design System Tokens
 * Three layers: primitive → semantic → component.
 * This file is intentionally framework-agnostic and can be reused by any page.
 */

:root {
  /* ============================= PRIMITIVES ============================= */
  --ds-color-blue-500: #5584ff;
  --ds-color-blue-600: #3d7fff;
  --ds-color-blue-050: #edf3ff;
  --ds-color-green-500: #45bd82;
  --ds-color-green-050: #eaf8f2;
  --ds-color-violet-500: #8068e8;
  --ds-color-violet-050: #f0edff;
  --ds-color-orange-500: #e67c2f;
  --ds-color-orange-050: #fff2e8;
  --ds-color-red-500: #f04452;
  --ds-color-red-050: #fff0f2;
  --ds-color-gray-950: #111111;
  --ds-color-gray-800: #333333;
  --ds-color-gray-600: #707783;
  --ds-color-gray-500: #87909c;
  --ds-color-gray-400: #9298a2;
  --ds-color-gray-300: #dfe3e9;
  --ds-color-gray-200: #e7e9ed;
  --ds-color-gray-100: #f2f4f7;
  --ds-color-gray-050: #f7f8fa;
  --ds-color-page: #f7fbff;
  --ds-color-white: #ffffff;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  --ds-font-size-xs: 11px;
  --ds-font-size-sm: 12px;
  --ds-font-size-md: 14px;
  --ds-font-size-lg: 17px;
  --ds-font-size-xl: 22px;
  --ds-font-size-kpi: 25px;

  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-pill: 999px;

  --ds-shadow-card: 0 4px 14px rgba(71, 84, 108, .07);
  --ds-shadow-popover: 0 10px 28px rgba(31, 39, 58, .12);
  --ds-shadow-focus: 0 0 0 3px rgba(85, 132, 255, .16);

  --ds-duration-fast: 150ms;
  --ds-duration-normal: 180ms;
  --ds-ease-standard: cubic-bezier(.4, 0, .2, 1);

  /* ============================== SEMANTIC ============================== */
  --ds-color-primary: var(--ds-color-blue-500);
  --ds-color-primary-hover: var(--ds-color-blue-600);
  --ds-color-primary-soft: var(--ds-color-blue-050);
  --ds-color-success: var(--ds-color-green-500);
  --ds-color-success-soft: var(--ds-color-green-050);
  --ds-color-warning: var(--ds-color-orange-500);
  --ds-color-warning-soft: var(--ds-color-orange-050);
  --ds-color-danger: var(--ds-color-red-500);
  --ds-color-danger-soft: var(--ds-color-red-050);
  --ds-color-text-primary: var(--ds-color-gray-950);
  --ds-color-text-secondary: var(--ds-color-gray-600);
  --ds-color-text-muted: var(--ds-color-gray-400);
  --ds-color-border: var(--ds-color-gray-200);
  --ds-color-surface: var(--ds-color-white);
  --ds-color-surface-muted: var(--ds-color-gray-050);
  --ds-color-background: var(--ds-color-page);
  --ds-focus-ring: var(--ds-shadow-focus);

  --ds-space-control: var(--ds-space-2);
  --ds-space-card: var(--ds-space-4);
  --ds-space-section: var(--ds-space-6);

  /* ============================== COMPONENT ============================= */
  --ds-button-height: 34px;
  --ds-button-height-sm: 30px;
  --ds-button-padding-x: 14px;
  --ds-button-radius: var(--ds-radius-sm);
  --ds-card-radius: var(--ds-radius-lg);
  --ds-card-shadow: var(--ds-shadow-card);
  --ds-card-padding: 18px;
  --ds-page-title-size: var(--ds-font-size-xl);
  --ds-page-title-weight: 600;
  --ds-page-header-gap: var(--ds-space-5);
  --ds-control-gap: var(--ds-space-2);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 0ms;
    --ds-duration-normal: 0ms;
  }
}