/* ============================================================
   Polymarket Oracle — Design Tokens
   主题：晨光观象台（V26 · 白底蓝字清新款）
   数据侧 = 晴空蓝 (hue 250)；奇门侧 = 琥珀金 (hue 70)
   ============================================================ */
:root {
  /* 背景与表面（白底） */
  --background: oklch(98% 0.006 245);
  --surface: oklch(100% 0 0);
  --surface-subtle: oklch(96.4% 0.009 245);
  --surface-hover: oklch(94% 0.012 245);
  --surface-glass: oklch(99% 0.005 245 / 0.86);

  /* 文本（蓝字） */
  --text: oklch(32% 0.07 255);
  --text-secondary: oklch(45% 0.06 255);
  --text-muted: oklch(58% 0.045 255);
  --text-inverse: oklch(99% 0.005 245);

  /* 边框 */
  --border: oklch(89% 0.018 250);
  --border-subtle: oklch(93% 0.012 250);
  --border-strong: oklch(80% 0.03 250);

  /* 数据系统 · 晴空蓝 */
  --data: oklch(52% 0.16 252);
  --data-hover: oklch(47% 0.16 252);
  --data-active: oklch(42% 0.15 252);
  --data-subtle: oklch(94.5% 0.028 250);
  --data-muted: oklch(70% 0.09 250);
  --data-foreground: oklch(99% 0.005 245);

  /* 奇门系统 · 琥珀金 */
  --mystic: oklch(62% 0.13 70);
  --mystic-hover: oklch(57% 0.13 70);
  --mystic-active: oklch(52% 0.12 70);
  --mystic-subtle: oklch(95.5% 0.04 85);
  --mystic-muted: oklch(78% 0.09 80);
  --mystic-foreground: oklch(25% 0.06 70);

  /* 语义色 */
  --success: oklch(52% 0.13 155);
  --success-subtle: oklch(94% 0.05 155);
  --danger: oklch(52% 0.19 25);
  --danger-subtle: oklch(94.5% 0.035 25);
  --warning: oklch(55% 0.13 70);
  --warning-subtle: oklch(95% 0.045 85);
  --info: oklch(52% 0.12 240);
  --info-subtle: oklch(94.5% 0.025 240);

  /* 叠加 */
  --overlay: oklch(30% 0.04 255 / 0.38);

  /* 字体 */
  --font-sans: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-serif: 'Noto Serif SC', 'Songti SC', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* 字号（移动优先流式）*/
  --font-size-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem);
  --font-size-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --font-size-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --font-size-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 1.7rem + 0.8vw, 2.25rem);

  /* 行高与字重 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.7;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 间距（8px 系）*/
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem;     --sp-10: 2.5rem; --sp-12: 3rem;

  /* 圆角 */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* 阴影（白底：更轻更柔） */
  --shadow-sm: 0 1px 2px oklch(35% 0.05 255 / 0.08);
  --shadow-md: 0 4px 10px -2px oklch(35% 0.05 255 / 0.1);
  --shadow-lg: 0 12px 28px -6px oklch(35% 0.05 255 / 0.14);
  --shadow-glow-data: 0 0 18px oklch(52% 0.16 252 / 0.18);
  --shadow-glow-mystic: 0 0 18px oklch(62% 0.13 70 / 0.16);

  /* 动效 */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* 布局 */
  --container: 720px;
  --tabbar-h: 3.75rem;
  --z-sticky: 100;
  --z-modal: 200;
}

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