/* ============================================
   DESIGN TOKENS — CSS Custom Properties
   ============================================ */

:root {
  /* ── Brand Colors ─────────────────────────── */
  --color-green:        #32905E;
  --color-green-dark:   #206040;
  --color-green-light:  #4aab78;
  --color-green-dim:    rgba(50, 144, 94, 0.08);
  --color-yellow:       #FFE500;
  --color-yellow-dark:  #e6ce00;

  /* ── Neutral Palette ──────────────────────── */
  --color-dark:         #111714;
  --color-dark-2:       #1e2b23;
  --color-dark-3:       #2d3d35;
  --color-gray-1:       #3f4f47;
  --color-gray-2:       #6b7c73;
  --color-gray-3:       #9eada6;
  --color-gray-4:       #c8d2ce;
  --color-gray-5:       #e8edea;
  --color-gray-6:       #f3f6f4;
  --color-bg:           #F5F5F5;
  --color-white:        #FFFFFF;

  /* ── Typography ───────────────────────────── */
  --font-primary:   'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --font-display:   'Pretendard', sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  /* ── Type Scale (전체 +1pt ≈ +1.33px) ────────── */
  --text-xs:   0.833rem;   /* 13.33px (12+1.33) */
  --text-sm:   0.958rem;   /* 15.33px (14+1.33) */
  --text-base: 1.083rem;   /* 17.33px (16+1.33) */
  --text-lg:   1.208rem;   /* 19.33px (18+1.33) */
  --text-xl:   1.333rem;   /* 21.33px (20+1.33) */
  --text-2xl:  1.583rem;   /* 25.33px (24+1.33) */
  --text-3xl:  1.958rem;   /* 31.33px (30+1.33) */
  --text-4xl:  2.333rem;   /* 37.33px (36+1.33) */
  --text-5xl:  3.083rem;   /* 49.33px (48+1.33) */
  --text-6xl:  3.833rem;   /* 61.33px (60+1.33) */
  --text-7xl:  4.583rem;   /* 73.33px (72+1.33) */

  /* ── Spacing ──────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;  --sp-32: 8rem;

  /* ── Layout ───────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  clamp(1.5rem, 5vw, 2.5rem);
  --section-py:     clamp(5rem, 10vw, 8rem);

  /* ── Borders & Radius ─────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-green: 0 8px 32px rgba(50, 144, 94, 0.25);

  /* ── Transitions ──────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;

  /* ── GNB ──────────────────────────────────── */
  --gnb-height: 72px;

  /* ── Surface Alpha ────────────────────────── */
  --color-green-soft:        #7ec9a5;
  --color-dark-deep:         #0a1510;
  --color-dark-tinted:       #0f1f17;
  --color-green-glow-12:     rgba(50, 144, 94, 0.12);
  --color-green-glow-15:     rgba(50, 144, 94, 0.15);
  --color-green-glow-20:     rgba(50, 144, 94, 0.20);
  --color-green-glow-30:     rgba(50, 144, 94, 0.30);
  --color-white-alpha-025:   rgba(255, 255, 255, 0.025);
  --color-white-alpha-12:    rgba(255, 255, 255, 0.12);
  --color-white-alpha-40:    rgba(255, 255, 255, 0.4);
  --color-white-alpha-55:    rgba(255, 255, 255, 0.55);
  --color-white-alpha-58:    rgba(255, 255, 255, 0.58);
  --color-white-alpha-75:    rgba(255, 255, 255, 0.75);

  /* ── Semantic Theme Tokens (themes.css 가 data-theme selector 로 덮어씀) ── */
  --color-primary:    #32905E;
  --color-secondary:  #FFE500;
  --color-accent:     #4aab78;
  --color-bg-warm:    #F5F5F5;
}