/**
 * CSS Variables - Design System
 * Solveit Frontend Refactoring
 *
 * 316개의 하드코딩된 색상을 통합하여 단일 소스로 관리
 */

:root {
  /* ==========================================
     PRIMARY BRAND COLORS
     ========================================== */
  --color-primary: #0051FF;
  --color-primary-dark: #0039B3;
  --color-primary-light: rgba(0, 81, 255, 0.1);
  --color-primary-gradient: linear-gradient(135deg, #1e88e5 0%, #42a5f5 100%);

  /* ==========================================
     SECONDARY COLORS
     ========================================== */
  --color-secondary: #1e88e5;
  --color-tertiary: #667eea;

  /* ==========================================
     TEXT COLORS
     ========================================== */
  --color-text: #333;
  --color-text-light: #666;
  --color-text-muted: #999;

  /* ==========================================
     BACKGROUND COLORS
     ========================================== */
  --color-bg: #f8f9fa;
  --color-bg-white: #fff;
  --color-bg-light: #fafafa;

  /* ==========================================
     BORDER COLORS
     ========================================== */
  --color-border: #e0e0e0;
  --color-border-light: #eee;
  --color-border-subtle: #edf2f7;

  /* ==========================================
     STATE COLORS
     ========================================== */
  --color-success: #4caf50;
  --color-error: #ff3b30;
  --color-warning: #ffd9a0;

  /* ==========================================
     SHADOWS
     ========================================== */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0px 0px 20px -7px rgba(0, 0, 0, 0.10);
  --shadow-primary: 0 4px 12px rgba(0, 81, 255, 0.2);

  /* ==========================================
     SPACING SCALE
     ========================================== */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.5rem;

  /* ==========================================
     BORDER RADIUS
     ========================================== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 60px;
  --radius-full: 999px;

  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  --font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  --font-family-display: 'Gasoek One', sans-serif;

  /* ==========================================
     TRANSITIONS
     ========================================== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* ==========================================
     GLASS EFFECT (for base.html navigation)
     ========================================== */
  --glass-bg: rgba(213, 213, 213, 0.6);
  --glass-border: rgba(230, 230, 230, 0.5);
  --glass-blur: 15px;
}