/**
 * tokens.css — 318 Sports 设计 Token 系统
 * 对标 FlashScore/SofaScore 暗色主题
 */

:root {
  /* ── 品牌 ── */
  --ag-accent: #2563EB;
  --ag-accent-hover: #1D4ED8;
  --ag-worldcup: #D97706;
  --ag-worldcup-hover: #B45309;

  /* ── 语义色 ── */
  --ag-live: #EF4444;
  --ag-live-pulse: rgba(239, 68, 68, 0.3);
  --ag-win: #22C55E;
  --ag-draw: #A3A3A3;
  --ag-loss: #EF4444;
  --ag-yellow-card: #FACC15;
  --ag-red-card: #EF4444;
  --ag-goal: #22C55E;
  --ag-var: #6366F1;

  /* ── 字体 ── */
  --ag-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ag-font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --ag-font-base: 14px;
  --ag-font-xs: 0.75rem;
  --ag-font-sm: 0.8125rem;
  --ag-font-md: 0.875rem;
  --ag-font-lg: 1rem;
  --ag-font-xl: 1.25rem;
  --ag-font-2xl: 1.5rem;
  --ag-font-3xl: 2rem;

  --ag-weight-regular: 400;
  --ag-weight-medium: 500;
  --ag-weight-semibold: 600;
  --ag-weight-bold: 700;

  --ag-leading-tight: 1.2;
  --ag-leading-normal: 1.5;
  --ag-leading-relaxed: 1.625;

  /* ── 间距 ── */
  --ag-space-1: 4px;
  --ag-space-2: 8px;
  --ag-space-3: 12px;
  --ag-space-4: 16px;
  --ag-space-5: 20px;
  --ag-space-6: 24px;
  --ag-space-8: 32px;
  --ag-space-10: 40px;
  --ag-space-12: 48px;
  --ag-space-16: 64px;

  /* ── 圆角 ── */
  --ag-radius-sm: 4px;
  --ag-radius-md: 8px;
  --ag-radius-lg: 12px;
  --ag-radius-xl: 16px;
  --ag-radius-full: 9999px;

  /* ── 阴影 ── */
  --ag-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --ag-shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --ag-shadow-lg: 0 10px 15px rgba(0,0,0,0.3);

  /* ── 过渡 ── */
  --ag-transition-fast: 150ms ease;
  --ag-transition-base: 250ms ease;
  --ag-transition-slow: 400ms ease;

  /* ── 布局 ── */
  --ag-header-height: 56px;
  --ag-sidebar-width: 280px;
  --ag-max-width: 1200px;

  /* ── Z-index ── */
  --ag-z-drawer: 100;
  --ag-z-header: 200;
  --ag-z-overlay: 300;
  --ag-z-modal: 400;
  --ag-z-toast: 500;
}

/* ── 暗色主题 (默认) ── */
[data-theme="dark"] {
  --ag-bg-primary: #0F1116;
  --ag-bg-secondary: #1A1D24;
  --ag-bg-tertiary: #22252D;
  --ag-bg-hover: #2A2D35;
  --ag-bg-active: #32353D;
  --ag-bg-card: #1A1D24;
  --ag-bg-input: #22252D;

  --ag-border: #2A2D35;
  --ag-border-light: #22252D;

  --ag-text-primary: #F5F5F5;
  --ag-text-secondary: #A3A3A3;
  --ag-text-tertiary: #737373;
  --ag-text-muted: #525252;
  --ag-text-inverse: #0F1116;

  --ag-score-font: var(--ag-text-primary);
  --ag-live-bg: rgba(239, 68, 68, 0.1);
}

/* ── 亮色主题 ── */
[data-theme="light"] {
  --ag-bg-primary: #FFFFFF;
  --ag-bg-secondary: #F8F9FA;
  --ag-bg-tertiary: #F1F3F5;
  --ag-bg-hover: #E9ECEF;
  --ag-bg-active: #DEE2E6;
  --ag-bg-card: #FFFFFF;
  --ag-bg-input: #F8F9FA;

  --ag-border: #DEE2E6;
  --ag-border-light: #E9ECEF;

  --ag-text-primary: #1A1A1A;
  --ag-text-secondary: #6B7280;
  --ag-text-tertiary: #9CA3AF;
  --ag-text-muted: #D1D5DB;
  --ag-text-inverse: #FFFFFF;

  --ag-score-font: var(--ag-text-primary);
  --ag-live-bg: rgba(239, 68, 68, 0.08);

  --ag-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --ag-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --ag-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}