:root {
  /* Primary Colors - 메인 컬러 */
  --color-primary-white: #FFFFFF;
  --color-off-white: #FAFAF8;
  --color-warm-white: #F7F5F2;

  /* Neutral Colors - 중성 컬러 */
  --color-light-gray: #E5E2DD;
  --color-medium-gray: #B8B5B0;
  --color-warm-gray: #8C8983;
  --color-charcoal: #3A3937;
  --color-deep-black: #1A1918;

  /* Accent Colors - 악센트 컬러 */
  --color-warm-beige: #D4C5B9;
  --color-soft-brown: #A08970;
  --color-deep-brown: #6B5D54;

  /* Interactive States - 인터랙션 상태 */
  --color-hover: rgba(26, 25, 24, 0.04);
  --color-active: rgba(26, 25, 24, 0.08);
  --color-focus: rgba(160, 137, 112, 0.15);

  /* Gradients - 그라디언트 */
  --gradient-overlay: linear-gradient(180deg, transparent 0%, rgba(26, 25, 24, 0.4) 100%);
  --gradient-soft: linear-gradient(135deg, #FAFAF8 0%, #F7F5F2 100%);

  /* Font Families */
  --font-primary: 'Pretendard', -apple-system, sans-serif;
  --font-display: 'Noto Serif KR', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Sizes - Desktop */
  --text-hero: clamp(48px, 5vw, 72px);
  --text-h1: clamp(36px, 4vw, 48px);
  --text-h2: clamp(28px, 3vw, 36px);
  --text-h3: clamp(20px, 2.5vw, 24px);
  --text-body: 16px;
  --text-small: 14px;
  --text-micro: 12px;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.12em;

  /* Spacing Scale (8px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Container */
  --container-max: 1440px;
  --container-padding: 24px;
  --container-padding-lg: 48px;

  /* Breakpoints */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* Timing Functions */
  --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);

  /* Durations */
  --duration-instant: 150ms;
  --duration-fast: 300ms;
  --duration-normal: 500ms;
  --duration-slow: 800ms;
  --duration-slower: 1200ms;

  /* Transitions */
  --transition-default: all var(--duration-fast) var(--ease-smooth);
  --transition-slow: all var(--duration-slow) var(--ease-out-expo);
}

/* Responsive Typography */
@media (max-width: 767px) {
  :root {
    --container-padding: 16px;
    --text-hero: 32px;
    --text-h1: 28px;
    --text-h2: 24px;
    --text-h3: 20px;
    --text-body: 14px;
    --text-small: 13px;
    --text-micro: 11px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-padding: 32px;
    --text-hero: 48px;
    --text-h1: 36px;
    --text-h2: 28px;
    --text-h3: 22px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 48px;
    --container-padding-lg: 64px;
  }
}