/**
 * Phase H shared visual tokens, no business logic.
 * PathlensAI Visual Design Tokens
 *
 * Token层级: primitive / semantic / component
 * 命名规范: --pl-{category}-{name}
 */

:root {
  /* ============================================
     1. Primitive Color Tokens (基础色值)
     ============================================ */
  --pl-color-blue-50: #eff6ff;
  --pl-color-blue-100: #dbeafe;
  --pl-color-blue-500: #3b82f6;
  --pl-color-blue-600: #256fd7;
  --pl-color-blue-700: #174ea6;
  --pl-color-cyan-400: #22d3ee;

  --pl-color-slate-50: #f8fafc;
  --pl-color-slate-100: #f1f5f9;
  --pl-color-slate-200: #e2e8f0;
  --pl-color-slate-300: #cbd5e1;
  --pl-color-slate-400: #94a3b8;
  --pl-color-slate-500: #64748b;
  --pl-color-slate-600: #475569;
  --pl-color-slate-700: #334155;
  --pl-color-slate-800: #1e293b;
  --pl-color-slate-900: #0f172a;

  --pl-color-white: #ffffff;
  --pl-color-black: #000000;

  /* 状态色 */
  --pl-color-green-500: #10b981;
  --pl-color-green-50: #ecfdf5;
  --pl-color-amber-500: #f59e0b;
  --pl-color-amber-50: #fffbeb;
  --pl-color-red-500: #ef4444;
  --pl-color-red-50: #fef2f2;

  /* ============================================
     2. Semantic Color Tokens (语义颜色)
     ============================================ */
  --pl-bg-page: var(--pl-color-slate-50);
  --pl-bg-section: var(--pl-color-slate-100);
  --pl-bg-section-alt: #f6f9fc;
  --pl-bg-card: var(--pl-color-white);
  --pl-bg-card-muted: var(--pl-color-slate-50);
  --pl-bg-hero: linear-gradient(180deg, var(--pl-bg-section-alt) 0%, var(--pl-bg-page) 100%);

  --pl-text-primary: var(--pl-color-slate-900);
  --pl-text-secondary: var(--pl-color-slate-700);
  --pl-text-muted: var(--pl-color-slate-500);
  --pl-text-placeholder: var(--pl-color-slate-400);

  --pl-border-soft: var(--pl-color-slate-200);
  --pl-border-light: rgba(148, 163, 184, 0.15);

  --pl-accent-primary: var(--pl-color-blue-600);
  --pl-accent-soft: var(--pl-color-blue-50);
  --pl-accent-gradient: linear-gradient(135deg, var(--pl-color-blue-600) 0%, var(--pl-color-cyan-400) 100%);

  --pl-status-success: var(--pl-color-green-500);
  --pl-status-success-bg: var(--pl-color-green-50);
  --pl-status-warning: var(--pl-color-amber-500);
  --pl-status-warning-bg: var(--pl-color-amber-50);
  --pl-status-info: var(--pl-color-blue-500);
  --pl-status-info-bg: var(--pl-color-blue-50);

  /* ============================================
     3. Typography Tokens (字体排版)
     ============================================ */
  --pl-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

  --pl-font-size-xs: 12px;
  --pl-font-size-sm: 14px;
  --pl-font-size-base: 16px;
  --pl-font-size-lg: 18px;
  --pl-font-size-xl: 20px;
  --pl-font-size-2xl: 24px;
  --pl-font-size-3xl: 32px;
  --pl-font-size-4xl: 40px;

  --pl-line-height-tight: 1.25;
  --pl-line-height-normal: 1.5;
  --pl-line-height-relaxed: 1.75;

  --pl-font-weight-regular: 400;
  --pl-font-weight-medium: 500;
  --pl-font-weight-semibold: 600;
  --pl-font-weight-bold: 700;
  --pl-font-weight-extrabold: 800;
  --pl-font-weight-black: 900;

  /* ============================================
     4. Spacing Tokens (间距)
     ============================================ */
  --pl-space-4: 4px;
  --pl-space-8: 8px;
  --pl-space-12: 12px;
  --pl-space-16: 16px;
  --pl-space-20: 20px;
  --pl-space-24: 24px;
  --pl-space-32: 32px;
  --pl-space-40: 40px;
  --pl-space-48: 48px;
  --pl-space-64: 64px;
  --pl-space-80: 80px;
  --pl-space-96: 96px;

  /* ============================================
     5. Radius Tokens (圆角)
     ============================================ */
  --pl-radius-8: 8px;
  --pl-radius-12: 12px;
  --pl-radius-16: 16px;
  --pl-radius-20: 20px;
  --pl-radius-24: 24px;
  --pl-radius-28: 28px;
  --pl-radius-pill: 9999px;

  /* ============================================
     6. Shadow / Border Tokens (阴影与边框)
     ============================================ */
  --pl-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.1);
  --pl-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --pl-shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --pl-shadow-elevated: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  --pl-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.3);

  /* ============================================
     7. Component Tokens (组件专用)
     ============================================ */
  /* Button */
  --pl-button-primary-bg: var(--pl-accent-primary);
  --pl-button-primary-text: var(--pl-color-white);
  --pl-button-primary-hover-bg: var(--pl-color-blue-700);
  --pl-button-secondary-bg: var(--pl-color-white);
  --pl-button-secondary-text: var(--pl-text-secondary);
  --pl-button-secondary-border: var(--pl-border-soft);
  --pl-button-ghost-text: var(--pl-text-muted);

  /* Card */
  --pl-card-radius: var(--pl-radius-16);
  --pl-card-padding: var(--pl-space-24);
  --pl-card-border: 1px solid var(--pl-border-soft);
  --pl-card-shadow: var(--pl-shadow-card);

  /* Section */
  --pl-section-gap: var(--pl-space-80);
  --pl-section-padding: var(--pl-space-24);

  /* Navigation */
  --pl-header-height: 68px;
  --pl-topbar-bg: rgba(248, 251, 254, 0.9);
  --pl-topbar-blur: blur(18px);

  /* Status elements */
  --pl-pill-bg: var(--pl-accent-soft);
  --pl-pill-text: var(--pl-accent-primary);
  --pl-pill-border: 1px solid rgba(59, 130, 246, 0.2);

  /* Callout & Boundary */
  --pl-callout-bg: var(--pl-color-slate-50);
  --pl-callout-border: 1px solid var(--pl-border-soft);
  --pl-boundary-bg: var(--pl-color-amber-50);
  --pl-boundary-border: 1px solid rgba(245, 158, 11, 0.2);

  /* Footer */
  --pl-footer-bg: #101b2a;
  --pl-footer-text: rgba(255, 255, 255, 0.55);
  --pl-footer-text-muted: rgba(255, 255, 255, 0.38);

  /* Max widths */
  --pl-max-width: 1180px;
  --pl-max-width-narrow: 840px;
  --pl-max-width-wide: 1460px;
}