/* ============================================================
   HRTech Design Tokens  —  Premium Dark Theme
   ============================================================ */

:root {
  /* ── 배경 ─────────────────────────────────── */
  --bg-primary:    #080d1a;   /* 가장 깊은 네이비 */
  --bg-secondary:  #0f172a;   /* 섹션 배경 */
  --bg-card:       #141e33;   /* 카드 표면 */
  --bg-card-hover: #1a2640;   /* 카드 호버 */
  --bg-overlay:    rgba(8, 13, 26, 0.85);

  /* ── 골드 엑센트 (유가금속 사업 아이덴티티) ─── */
  --gold-500:  #c9a84c;
  --gold-400:  #dbbe70;
  --gold-300:  #edd898;
  --gold-600:  #a8872d;

  /* ── 텍스트 ───────────────────────────────── */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-gold:      #c9a84c;

  /* ── 테두리 ───────────────────────────────── */
  --border:       #1e293b;
  --border-light: #2d3a50;
  --border-gold:  rgba(201, 168, 76, 0.30);

  /* ── 타이포그래피 ──────────────────────────── */
  --font-primary: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-mono:    'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

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

  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

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

  /* ── 레이아웃 ─────────────────────────────── */
  --max-width:    1200px;
  --header-h:     72px;
  --section-py:   96px;

  /* ── 반경 ─────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;

  /* ── 그림자 ───────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-gold:0 0 20px rgba(201,168,76,0.15);

  /* ── 트랜지션 ─────────────────────────────── */
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ── 반응형 토큰 재정의 ────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-py: 72px; }
}
@media (max-width: 768px) {
  :root {
    --section-py: 52px;
    --header-h:   64px;
    --text-4xl:   2rem;     /* 36px → 32px */
    --text-5xl:   2.5rem;   /* 48px → 40px */
    --text-6xl:   3rem;     /* 60px → 48px */
  }
}
@media (max-width: 480px) {
  :root {
    --section-py: 40px;
    --text-4xl:   1.75rem;  /* 28px */
    --text-5xl:   2.25rem;  /* 36px */
  }
}