/* ============================================================
   Genex Design System - CSS Design Tokens

   紫色系科技风，干净清爽型
   Primary: #6C5CE7 (创新/科技紫)
   Target: React + Next.js Web管理前端
   ============================================================ */

:root {
  /* ---- Primary Purple ---- */
  --color-primary: #6C5CE7;
  --color-primary-light: #9B8FFF;
  --color-primary-dark: #4834D4;
  --color-primary-surface: #F3F1FF;
  --color-primary-container: #E8E5FF;

  /* ---- Neutral ---- */
  --color-gray-50: #F8F9FC;
  --color-gray-100: #F1F3F8;
  --color-gray-200: #E4E7F0;
  --color-gray-300: #CDD2DE;
  --color-gray-400: #A0A8BE;
  --color-gray-500: #7A839E;
  --color-gray-600: #5C6478;
  --color-gray-700: #3D4459;
  --color-gray-800: #262B3A;
  --color-gray-900: #141723;

  /* ---- Semantic ---- */
  --color-success: #00C48C;
  --color-success-light: #E6FAF3;
  --color-warning: #FFAB2E;
  --color-warning-light: #FFF7E6;
  --color-error: #FF4757;
  --color-error-light: #FFF0F0;
  --color-info: #3B82F6;
  --color-info-light: #EFF6FF;

  /* ---- Background & Surface ---- */
  --color-bg: #F8F9FC;
  --color-surface: #FFFFFF;
  --color-surface-variant: #F1F3F8;

  /* ---- Text ---- */
  --color-text-primary: #141723;
  --color-text-secondary: #5C6478;
  --color-text-tertiary: #A0A8BE;
  --color-text-disabled: #CDD2DE;
  --color-text-on-primary: #FFFFFF;
  --color-text-link: #6C5CE7;

  /* ---- Border ---- */
  --color-border: #E4E7F0;
  --color-border-light: #F1F3F8;
  --color-border-focus: #6C5CE7;

  /* ---- Credit Rating ---- */
  --color-credit-aaa: #00C48C;
  --color-credit-aa: #3B82F6;
  --color-credit-a: #6C5CE7;
  --color-credit-bbb: #FFAB2E;
  --color-credit-bb: #FF6B6B;

  /* ---- Typography ---- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-display: 700 32px/1.2 var(--font-family);
  --text-h1: 700 24px/1.3 var(--font-family);
  --text-h2: 600 20px/1.35 var(--font-family);
  --text-h3: 600 16px/1.4 var(--font-family);
  --text-body-lg: 400 16px/1.5 var(--font-family);
  --text-body: 400 14px/1.5 var(--font-family);
  --text-body-sm: 400 12px/1.5 var(--font-family);
  --text-label-lg: 600 16px/1.4 var(--font-family);
  --text-label: 500 14px/1.4 var(--font-family);
  --text-label-sm: 500 12px/1.4 var(--font-family);
  --text-caption: 400 11px/1.4 var(--font-family);

  /* ---- Spacing ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;

  /* ---- Border Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-primary: 0 4px 16px rgba(108, 92, 231, 0.2);

  /* ---- Sidebar ---- */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;
}