/* ═══════════════════════════════════════════════════════
   "清透" Design Token Engine — 舆情监控系统
   Clarity Design System v1.0
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* ── Typography — Font Stack ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, monospace;
  --font-ui: var(--font-sans);
  --font-data: var(--font-mono);

  /* ── Typography — Design System Tokens ── */
  --type-display-lg: 28px;
  --type-display-sm: 22px;
  --type-heading-lg: 16px;
  --type-heading-sm: 14px;
  --type-body-lg: 14px;
  --type-body-sm: 12px;
  --type-caption-lg: 12px;
  --type-caption-sm: 11px;

  /* ── Typography — Legacy Size Aliases ── */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ── Motion ── */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);

  /* ── Shadows (base, overridden per theme) ── */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* ── Semantic Colors (design system standard) ── */
  --danger:        #F53F3F;
  --danger-bg:     #FFECE8;
  --danger-border: #FDCDC5;
  --warning:       #FF7D00;
  --warning-bg:    #FFF3E8;
  --warning-border:#FFD6A5;
  --success:       #00B42A;
  --success-bg:    #E8FFEA;
  --success-border:#AFF0B5;
  --info:          #165DFF;
  --info-bg:       #E8F3FF;
  --info-border:   #BEDAFF;
  --neutral:       #86909C;
  --neutral-bg:    #F2F3F5;
  --neutral-border:#E5E6EB;

  /* ── P0-P3 Aliases (point to semantic colors) ── */
  --p0: var(--danger);
  --p0-bg: var(--danger-bg);
  --p0-border: var(--danger-border);
  --p1: var(--warning);
  --p1-bg: var(--warning-bg);
  --p1-border: var(--warning-border);
  --p2: var(--info);
  --p2-bg: var(--info-bg);
  --p2-border: var(--info-border);
  --p3: var(--neutral);
  --p3-bg: var(--neutral-bg);
  --p3-border: var(--neutral-border);

  /* ── Sentiment Colors ── */
  --sentiment-positive: #22C55E;
  --sentiment-neutral: #94A3B8;
  --sentiment-negative: #EF4444;

  /* ── Platform Colors ── */
  --platform-weibo: #E6162D;
  --platform-zhihu: #0066FF;
  --platform-xhs: #FE2C55;
  --platform-douyin: #010101;
  --platform-bilibili: #00A1D6;
  --platform-twitter: #1DA1F2;
  --platform-wechat: #07C160;
  --platform-tieba: #4E6EF2;
  --platform-news: #FF6B35;
  --platform-kuaishou: #FF4906;
  --platform-douban: #007722;

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* ═══════════════════════════════════════════════════════
   Theme: Midnight Command (Default)
   ═══════════════════════════════════════════════════════ */
[data-theme="midnight"], :root {
  /* ── New surface/text/border tokens ── */
  --surface-base: #0B0F1A;
  --surface-card: #111827;
  --surface-elevated: #1A2035;
  --surface-sunken: #0F1629;
  --surface-overlay: rgba(0,0,0,0.5);

  --text-title: #E8ECF4;
  --text-body: #94A3B8;
  --text-caption: #64748B;
  --text-disabled: #475569;
  --text-inverse: #0B0F1A;

  --border-light: rgba(148,163,184,0.12);
  --border-medium: rgba(148,163,184,0.22);
  --border-focus: #3B82F6;

  /* ── Old aliases → new tokens (双写兼容) ── */
  --bg-base: var(--surface-base);
  --bg-surface: var(--surface-card);
  --bg-elevated: var(--surface-elevated);
  --bg-input: var(--surface-sunken);
  --bg-hover: #1E2A42;
  --bg-active: #243352;

  --text-primary: var(--text-title);
  --text-secondary: var(--text-body);
  --text-muted: var(--text-caption);

  --border-default: var(--border-light);
  --border-strong: var(--border-medium);

  /* ── Brand / Accent ── */
  --primary: #3B82F6;
  --primary-hover: #2563EB;
  --primary-bg: rgba(59,130,246,0.1);
  --primary-border: rgba(59,130,246,0.3);

  --accent: #06D6A0;
  --accent-bg: rgba(6,214,160,0.1);

  /* ── Semantic overrides for dark ── */
  --danger: #EF4444;
  --danger-bg: rgba(239,68,68,0.1);
  --danger-border: rgba(239,68,68,0.25);
  --warning: #F59E0B;
  --warning-bg: rgba(245,158,11,0.1);
  --warning-border: rgba(245,158,11,0.25);
  --success: #22C55E;
  --success-bg: rgba(34,197,94,0.1);
  --success-border: rgba(34,197,94,0.25);
  --info: #3B82F6;
  --info-bg: rgba(59,130,246,0.1);
  --info-border: rgba(59,130,246,0.25);
  --neutral: #94A3B8;
  --neutral-bg: rgba(148,163,184,0.1);
  --neutral-border: rgba(148,163,184,0.2);

  /* ── Shadows (dark) ── */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.35);

  --scrollbar-track: #111827;
  --scrollbar-thumb: #334155;
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════
   Theme: Clean Daylight (merged with Feishu values)
   ═══════════════════════════════════════════════════════ */
[data-theme="daylight"] {
  --surface-base: #F7F8FA;
  --surface-card: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-sunken: #F0F1F3;
  --surface-overlay: rgba(0,0,0,0.4);

  --text-title: #1D2129;
  --text-body: #4E5969;
  --text-caption: #86909C;
  --text-disabled: #C9CDD4;
  --text-inverse: #FFFFFF;

  --border-light: #E5E6EB;
  --border-medium: #C9CDD4;
  --border-focus: #165DFF;

  /* Old aliases */
  --bg-base: var(--surface-base);
  --bg-surface: var(--surface-card);
  --bg-elevated: var(--surface-elevated);
  --bg-input: var(--surface-sunken);
  --bg-hover: #F2F3F5;
  --bg-active: #E5E6EB;

  --text-primary: var(--text-title);
  --text-secondary: var(--text-body);
  --text-muted: var(--text-caption);

  --border-default: var(--border-light);
  --border-strong: var(--border-medium);

  --primary: #165DFF;
  --primary-hover: #0E42D2;
  --primary-bg: rgba(22,93,255,0.06);
  --primary-border: rgba(22,93,255,0.2);

  --accent: #00B42A;
  --accent-bg: rgba(0,180,42,0.06);

  --danger: #F53F3F;
  --danger-bg: rgba(245,63,63,0.06);
  --danger-border: rgba(245,63,63,0.2);
  --warning: #FF7D00;
  --warning-bg: rgba(255,125,0,0.06);
  --warning-border: rgba(255,125,0,0.2);
  --success: #00B42A;
  --success-bg: rgba(0,180,42,0.06);
  --success-border: rgba(0,180,42,0.2);
  --info: #165DFF;
  --info-bg: rgba(22,93,255,0.06);
  --info-border: rgba(22,93,255,0.2);
  --neutral: #86909C;
  --neutral-bg: #F2F3F5;
  --neutral-border: #E5E6EB;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 14px rgba(0,0,0,0.08);

  --scrollbar-track: #F5F6F7;
  --scrollbar-thumb: #DEE0E3;

  --color-down: #F53F3F;
  --color-up: #00B42A;
  --color-focus: #165DFF;
  --color-warn-text: #FF7D00;

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════
   Theme: High Contrast
   ═══════════════════════════════════════════════════════ */
[data-theme="contrast"] {
  --surface-base: #000000;
  --surface-card: #0A0A0A;
  --surface-elevated: #141414;
  --surface-sunken: #050505;
  --surface-overlay: rgba(0,0,0,0.7);

  --text-title: #FFFFFF;
  --text-body: #D4D4D8;
  --text-caption: #A1A1AA;
  --text-disabled: #71717A;
  --text-inverse: #000000;

  --border-light: rgba(255,255,255,0.15);
  --border-medium: rgba(255,255,255,0.3);
  --border-focus: #60A5FA;

  /* Old aliases */
  --bg-base: var(--surface-base);
  --bg-surface: var(--surface-card);
  --bg-elevated: var(--surface-elevated);
  --bg-input: var(--surface-sunken);
  --bg-hover: #1A1A1A;
  --bg-active: #242424;

  --text-primary: var(--text-title);
  --text-secondary: var(--text-body);
  --text-muted: var(--text-caption);

  --border-default: var(--border-light);
  --border-strong: var(--border-medium);

  --primary: #60A5FA;
  --primary-hover: #3B82F6;
  --primary-bg: rgba(96,165,250,0.12);
  --primary-border: rgba(96,165,250,0.3);

  --danger: #FF6B6B;
  --danger-bg: rgba(255,107,107,0.12);
  --danger-border: rgba(255,107,107,0.3);
  --warning: #FFB347;
  --warning-bg: rgba(255,179,71,0.12);
  --warning-border: rgba(255,179,71,0.3);
  --success: #5DFDCB;
  --success-bg: rgba(93,253,203,0.12);
  --success-border: rgba(93,253,203,0.3);
  --info: #60A5FA;
  --info-bg: rgba(96,165,250,0.12);
  --info-border: rgba(96,165,250,0.3);
  --neutral: #A1A1AA;
  --neutral-bg: rgba(161,161,170,0.12);
  --neutral-border: rgba(161,161,170,0.25);

  --shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);

  --scrollbar-track: #0A0A0A;
  --scrollbar-thumb: #3F3F46;

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════
   Legacy Alias + Premium Surface Compatibility Layer
   解决旧页面变量缺失、增强层次与高端质感
   ═══════════════════════════════════════════════════════ */
:root,
[data-theme="midnight"] {
  --bg-white: var(--bg-surface);
  --bg-gray: var(--bg-hover);
  --border: var(--border-default);
  --radius: var(--radius-lg);
  --text: var(--text-primary);
  --text-light: var(--text-muted);
  --text-main: var(--text-primary);
  --primary-light: #60A5FA;
  --gradient-subtle: linear-gradient(135deg, rgba(59,130,246,0.16) 0%, rgba(6,214,160,0.08) 100%);
  --shadow: var(--shadow-md);
  --shadow-primary: 0 20px 44px -24px rgba(59,130,246,0.75);
  --shadow-glow: 0 0 0 1px rgba(59,130,246,0.14), 0 24px 56px -30px rgba(59,130,246,0.72);
  --bar-target: 0%;
  --heat-angle: -90deg;
}

[data-theme="daylight"] {
  --bg-white: var(--bg-surface);
  --bg-gray: var(--bg-hover);
  --border: var(--border-default);
  --radius: var(--radius-lg);
  --text: var(--text-primary);
  --text-light: var(--text-muted);
  --text-main: var(--text-primary);
  --primary-light: #3B82F6;
  --gradient-subtle: linear-gradient(135deg, rgba(22,93,255,0.10) 0%, rgba(0,180,42,0.05) 100%);
  --shadow: var(--shadow-md);
  --shadow-primary: 0 20px 40px -24px rgba(22,93,255,0.42);
  --shadow-glow: 0 0 0 1px rgba(22,93,255,0.08), 0 20px 44px -28px rgba(22,93,255,0.22);
  --bar-target: 0%;
  --heat-angle: -90deg;
}

[data-theme="contrast"] {
  --bg-white: var(--bg-surface);
  --bg-gray: var(--bg-hover);
  --border: var(--border-default);
  --radius: var(--radius-lg);
  --text: var(--text-primary);
  --text-light: var(--text-muted);
  --text-main: var(--text-primary);
  --primary-light: #93C5FD;
  --gradient-subtle: linear-gradient(135deg, rgba(96,165,250,0.18) 0%, rgba(93,253,203,0.08) 100%);
  --shadow: var(--shadow-md);
  --shadow-primary: 0 20px 44px -24px rgba(96,165,250,0.70);
  --shadow-glow: 0 0 0 1px rgba(96,165,250,0.18), 0 24px 56px -30px rgba(96,165,250,0.66);
  --bar-target: 0%;
  --heat-angle: -90deg;
}