:root {
  /* Color */
  --color-bg: #ffffff;
  --color-bg-alt: #f8fbff;
  --color-surface: #f8fafc;
  --color-surface-strong: #eef4ff;
  --color-surface-dark: #0f172a;
  --color-text: #0f172a;
  --color-text-soft: #334155;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-primary: #2563eb;
  --color-primary-strong: #1d4ed8;
  --color-primary-soft: #dbeafe;
  --color-primary-tint: #eff6ff;
  --color-success: #047857;
  --color-error: #dc2626;
  --color-dark: #0f172a;
  --color-white: #ffffff;

  /* Gradient */
  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

  /* Typography */
  --font-sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-body: 1rem;
  --line-height-body: 1.78;
  --letter-spacing-tight: -0.04em;
  --letter-spacing-body: -0.01em;

  /* Layout */
  --container-width: 1240px;
  --header-height: 84px;
  --section-padding: clamp(72px, 8vw, 120px);
  --section-padding-compact: clamp(56px, 6vw, 88px);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-xs: 0 8px 20px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 24px 60px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 32px 80px rgba(15, 23, 42, 0.16);
  --shadow-focus: 0 0 0 4px rgba(37, 99, 235, 0.14);

  /* Motion */
  --transition-fast: 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-medium: 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}