/* ============================================================
   세온코더 (SEONCODER) — Design Tokens
   01-foundation: 색상, 타이포그래피, 간격, 보더, 그림자 등
   ============================================================ */

:root {

  /* ─── 메인 컬러 ──────────────────────────────────────────── */
  --color-primary:        #0066FF;
  --color-primary-hover:  #0052CC;
  --color-primary-light:  #E6F0FF;

  /* ─── 액센트 컬러 ─────────────────────────────────────────── */
  --color-accent:         #00E5A0;
  --color-accent-hover:   #00CC8E;
  --color-highlight:      #FFD600;

  /* ─── 배경 컬러 ───────────────────────────────────────────── */
  --color-bg-dark:            #0A0A0F;
  --color-bg-dark-secondary:  #12121A;
  --color-bg-light:           #F5F5F7;
  --color-bg-white:           #FFFFFF;

  /* ─── 텍스트 컬러 ─────────────────────────────────────────── */
  --color-text-dark:              #0A0A0F;
  --color-text-dark-secondary:    #555555;
  --color-text-light:             #FFFFFF;
  --color-text-light-secondary:   #A0A0B0;

  /* ─── 시맨틱 컬러 ─────────────────────────────────────────── */
  --color-success:  #00C853;
  --color-warning:  #FF9800;
  --color-error:    #FF3B30;
  --color-info:     #0066FF;

  /* ─── 보더 컬러 ───────────────────────────────────────────── */
  --color-border-light: #E0E0E5;
  --color-border-dark:  #2A2A35;

  /* ─── 폰트 패밀리 ─────────────────────────────────────────── */
  --font-heading: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ─── 폰트 사이즈 (데스크톱) ──────────────────────────────── */
  --text-hero:    56px;
  --text-h1:      40px;
  --text-h2:      32px;
  --text-h3:      24px;
  --text-h4:      20px;
  --text-body:    16px;
  --text-body-lg: 18px;
  --text-small:   14px;
  --text-xs:      12px;

  /* ─── 폰트 사이즈 (모바일 — @media 내에서 override) ────────── */
  --text-hero-mobile: 36px;
  --text-h1-mobile:   28px;
  --text-h2-mobile:   24px;
  --text-h3-mobile:   20px;
  --text-body-mobile: 16px;

  /* ─── 폰트 웨이트 ─────────────────────────────────────────── */
  --weight-black:    900;
  --weight-bold:     700;
  --weight-semibold: 600;
  --weight-medium:   500;
  --weight-regular:  400;

  /* ─── 행간 ────────────────────────────────────────────────── */
  --leading-tight:   1.2;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ─── 간격 스케일 ─────────────────────────────────────────── */
  --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-max:            1200px;
  --container-narrow:         800px;
  --container-padding:        24px;
  --container-padding-mobile: 16px;

  /* ─── 섹션 간격 ───────────────────────────────────────────── */
  --section-gap:            120px;
  --section-gap-mobile:     80px;
  --section-padding:        80px 0;
  --section-padding-mobile: 48px 0;

  /* ─── 보더 라운딩 ─────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── 그림자 ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* ─── 트랜지션 ────────────────────────────────────────────── */
  --transition-fast:   all 0.2s ease;
  --transition-normal: all 0.3s ease;

  /* ─── 반응형 브레이크포인트 (JS에서 참조용) ───────────────── */
  --breakpoint-mobile:  480px;
  --breakpoint-tablet:  768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide:    1440px;

  /* ─── z-index 레이어 ──────────────────────────────────────── */
  --z-base:       0;
  --z-above:      10;
  --z-nav:        100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-toast:      400;
  --z-floating:   500;
}