/**
 * HelpDS Common CSS Variables v2.0
 * 전체 Dark 테마 기반 통일된 색상 팔레트
 *
 * 사용법: <link rel="stylesheet" href="assets/common-vars.css">
 */

:root {
  /* ===== Primary Colors ===== */
  --primary: #0066FF;
  --primary-light: #E6F0FF;
  --primary-dark: #0052CC;
  --primary-hover: rgba(0, 102, 255, 0.15);

  /* ===== Secondary Colors ===== */
  --secondary: #00D9FF;
  --secondary-light: #E0F7FF;

  /* ===== Status Colors (통일) ===== */
  --success: #00C853;
  --success-light: #E8F5E9;
  --success-glow: rgba(0, 200, 83, 0.3);

  --warning: #F59E0B;
  --warning-light: #FEF3C7;

  --danger: #EF4444;
  --danger-light: #FEE2E2;

  /* ===== Accent Colors ===== */
  --purple: #7C3AED;
  --purple-light: #EDE9FE;
  --cyan: #06B6D4;
  --cyan-light: #ECFEFF;
  --cyan-bright: #00F0FF;

  /* ===== Dark Theme (INDEX 테마 기준) ===== */
  --bg-main: #0A0E27;
  --bg-secondary: #0D1230;
  --bg-page: linear-gradient(135deg, #0A0E27 0%, #0D1230 100%);
  --bg-card: rgba(30, 41, 59, 0.6);
  --bg-card-solid: #1e293b;
  --bg-hover: rgba(0, 102, 255, 0.15);
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* ===== Text Colors (INDEX 테마 기준) ===== */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --text-dark: #F8FAFC;

  /* ===== Border Colors (Dark Theme) ===== */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(0, 102, 255, 0.4);
  --border-light: #E2E8F0;

  /* ===== Shadows (Dark Theme) ===== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 4px 12px rgba(0, 102, 255, 0.25);
  --shadow-glow: 0 0 20px rgba(0, 102, 255, 0.3);

  /* ===== Gradients (INDEX 테마 기준) ===== */
  --gradient-primary: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
  --gradient-header: linear-gradient(135deg, #0066FF 0%, #7C3AED 100%);
  --gradient-success: linear-gradient(135deg, #00C853 0%, #34D399 100%);
  --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
  --gradient-orange: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  --gradient-cyan: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%);
  --gradient-dark: linear-gradient(135deg, #0A0E27 0%, #0D1230 100%);

  /* Card Top Border Gradients */
  --gradient-border-blue: linear-gradient(90deg, #0066FF, #00D9FF);
  --gradient-border-purple: linear-gradient(90deg, #7C3AED, #A78BFA);
  --gradient-border-orange: linear-gradient(90deg, #F59E0B, #FBBF24);
  --gradient-border-green: linear-gradient(90deg, #00C853, #34D399);

  /* ===== Typography ===== */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ===== Spacing ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ===== Component Tokens ===== */
  --card-radius: 16px;
  --button-radius: 10px;
  --badge-radius: 20px;
  --input-radius: 8px;

  /* ===== Transitions ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== Z-Index ===== */
  --z-dropdown: 100;
  --z-modal: 200;
  --z-tooltip: 300;
  --z-fixed: 400;
}

/* ===== Light Theme Override (필요시 사용) ===== */
[data-theme="light"] {
  --bg-main: #F7FAFC;
  --bg-page: linear-gradient(135deg, #F8FAFF 0%, #F0F4FF 100%);
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;
  --bg-hover: rgba(0, 102, 255, 0.08);

  --text-primary: #1A202C;
  --text-secondary: #4A5568;
  --text-muted: #718096;

  --border-color: #E2E8F0;
  --border-hover: rgba(0, 102, 255, 0.5);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}