/* ==========================================================================
   variables.css  —  CSS Custom Properties (Design Tokens)
   CMS 테마 커스터마이징의 중심 파일: 색상, 타이포그래피, 간격 등을 여기서 관리
   ========================================================================== */

:root {
  /* ── Colors ─────────────────────────────────────────────────── */
  /* Brand */
  --color-brand-primary:    #2C5F2E;   /* 딥 그린 — 로고, CTA 버튼 */
  --color-brand-secondary:  #97BC62;   /* 라이트 그린 — 강조, hover */
  --color-brand-accent:     #C8A96E;   /* 골드 — 프리미엄 포인트 */

  /* Neutrals */
  --color-white:            #FFFFFF;
  --color-off-white:        #F8F6F2;   /* 배경 연베이지 */
  --color-gray-100:         #F2F0EC;
  --color-gray-200:         #E4E0D8;
  --color-gray-400:         #9E9890;
  --color-gray-600:         #6B6560;
  --color-gray-800:         #3A3530;
  --color-black:            #1A1815;

  /* Semantic */
  --color-text:             var(--color-gray-800);
  --color-text-light:       var(--color-gray-600);
  --color-text-inverse:     var(--color-white);
  --color-bg:               var(--color-white);
  --color-bg-alt:           var(--color-off-white);
  --color-border:           var(--color-gray-200);

  /* State */
  --color-error:            #D94F4F;
  --color-success:          #2C5F2E;
  --color-focus:            #1A73E8;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-sans:    'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-serif:   'Noto Serif KR', 'Batang', Georgia, serif;
  --font-mono:    'Fira Code', 'Courier New', monospace;

  /* Scale (Major Third — 1.25) */
  --text-xs:      0.64rem;    /* 10.2px */
  --text-sm:      0.8rem;     /* 12.8px */
  --text-base:    1rem;       /* 16px */
  --text-md:      1.25rem;    /* 20px */
  --text-lg:      1.563rem;   /* 25px */
  --text-xl:      1.953rem;   /* 31.2px */
  --text-2xl:     2.441rem;   /* 39px */
  --text-3xl:     3.052rem;   /* 48.8px */
  --text-hero:    clamp(2.5rem, 6vw, 4.5rem);

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;

  --line-height-tight:    1.2;
  --line-height-snug:     1.4;
  --line-height-base:     1.6;
  --line-height-relaxed:  1.8;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-wide:    0.08em;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  --section-gap:  var(--space-20);    /* 섹션 상하 패딩 */
  --content-gap:  var(--space-12);    /* 콘텐츠 블록 간격 */

  /* ── Layout ──────────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-narrow:  760px;
  --container-px:      var(--space-6);  /* 모바일 사이드 패딩 */

  /* ── Borders & Radius ────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  --border-width:     1px;
  --border-color:     var(--color-border);

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.18);

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

  /* ── Z-index scale ───────────────────────────────────────────── */
  --z-below:      -1;
  --z-base:        0;
  --z-raised:     10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* ── Header ──────────────────────────────────────────────────── */
  --header-height:        72px;
  --header-height-mobile: 60px;
}

/* Dark mode 대비 (필요 시 활성화)
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:   #1A1815;
    --color-text: #F2F0EC;
  }
}
*/