/* ==========================================================================
   Variables — 디자인 토큰 (다크/라이트 테마)
   ========================================================================== */

/* ── 라이트 테마 (기본) ── */
:root,
[data-theme="light"] {
  /* Colors */
  --color-bg:        #F8F9FA;
  --color-surface:   #FFFFFF;
  --color-text:      #1A1A2E;
  --color-text-sub:  #6B7280;
  --color-accent:    #FF6B35;
  --color-accent-hover: #E55A28;
  --color-border:    #E0E0E0;
  --color-overlay:   rgba(0, 0, 0, 0.5);
  --color-success:   #22C55E;
  --color-error:     #EF4444;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── 다크 테마 ── */
[data-theme="dark"] {
  --color-bg:        #0D1117;
  --color-surface:   #161B22;
  --color-text:      #E6EDF3;
  --color-text-sub:  #8B949E;
  --color-accent:    #FF6B35;
  --color-accent-hover: #FF8555;
  --color-border:    #30363D;
  --color-overlay:   rgba(0, 0, 0, 0.7);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── 타이포그래피 ── */
:root {
  --font-family:   'Segoe UI', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'Fira Code', 'Consolas', monospace;

  --font-xs:   0.75rem;   /* 12px */
  --font-sm:   0.875rem;  /* 14px */
  --font-base: 1rem;      /* 16px */
  --font-md:   1.125rem;  /* 18px */
  --font-lg:   1.5rem;    /* 24px */
  --font-xl:   2rem;      /* 32px */
  --font-2xl:  2.5rem;    /* 40px */
  --font-3xl:  3rem;      /* 48px */
}

/* ── 간격 ── */
:root {
  --space-xs:  0.25rem;  /* 4px */
  --space-sm:  0.5rem;   /* 8px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
}

/* ── 레이아웃 ── */
:root {
  --max-width:  1200px;
  --header-h:   4rem;    /* 64px */
}

/* ── 둥근 모서리 ── */
:root {
  --radius-sm:   0.25rem;  /* 4px */
  --radius-md:   0.5rem;   /* 8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-full: 9999px;
}

/* ── z-index 레이어 ── */
:root {
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── 트랜지션 ── */
:root {
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ── 브레이크포인트 (참고용 — CSS 미디어쿼리에서 직접 값 사용) ── */
/* Mobile:  < 768px   */
/* Tablet:  768–1024px */
/* Desktop: > 1024px  */