/* =========================================
   base.css — ZNex Lab
   Typography Scale & Global Base Styles
   ========================================= */

/* === Body === */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);  /* 400 — 가독성 기준선 */
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  line-height: var(--leading-relaxed);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   Typography Hierarchy
   Display / Heading / Body / Caption
   ========================================= */

/* --- Display (Hero급) — 다이나믹 헤비 웨이트 */
.display-1 {
  font-family: var(--font-family-display);
  font-size: clamp(3rem, 9vw, var(--font-size-7xl));
  font-weight: var(--font-weight-extrabold); /* 800 — 강렬한 존재감 */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);   /* -0.04em — 타이트하게 */
}

.display-2 {
  font-family: var(--font-family-heading);
  font-size: clamp(2.25rem, 6vw, var(--font-size-6xl));
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

/* --- Headings — Space Grotesk 기반, 웨이트 대비로 입체감 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);      /* 700 기본 */
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: 800;                          /* 800 — 강한 임팩트 */
  letter-spacing: var(--tracking-tighter);
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);      /* 700 */
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);      /* 700 */
  letter-spacing: -0.02em;
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);  /* 600 */
  letter-spacing: var(--tracking-tight);
}

h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);  /* 600 */
  letter-spacing: var(--tracking-normal);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);  /* 600 */
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* 반응형 헤딩 스케일 */
@media (min-width: 768px) {
  h1 { font-size: var(--font-size-5xl); }
  h2 { font-size: var(--font-size-4xl); }
  h3 { font-size: var(--font-size-2xl); }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--font-size-6xl); }
}

/* --- Body Text --- */
p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 68ch; /* 가독성 최적 너비 */
}

/* --- Caption / Label --- */
.caption {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

.label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* --- Overline (섹션 태그 등) --- */
.overline {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* =========================================
   Gradient Text — 흰빛에서 은회색으로 shimmer
   ========================================= */
@keyframes shimmer-text {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.gradient-text {
  /* Fallback: background-clip:text 미지원 브라우저(일부 모바일)에서 흰색으로 표시 */
  color: #ffffff;
  background: var(--gradient-text-shimmer);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Shimmer 애니메이션 */
  animation: shimmer-text 6s linear infinite;
  /* Safari 성능 최적화 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* =========================================
   Section Base
   ========================================= */
section {
  padding: var(--space-20) 0;
  position: relative;
}

@media (min-width: 768px) {
  section {
    padding: var(--space-32) 0;
  }
}

/* === Section Title — 다이나믹 Bold + 글로우 */
.section-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);    /* 700 — 강한 임팩트 */
  letter-spacing: var(--tracking-tight);
  text-align: center;
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

@media (min-width: 768px) {
  .section-title {
    font-size: var(--font-size-4xl);
  }
}

.section-subtitle {
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);   /* 300 — 헤드라인과 굵기 대비 */
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-16);
  line-height: var(--leading-relaxed);
  letter-spacing: 0.01em;
}

/* =========================================
   Focus Styles (Accessibility — WCAG AA)
   흰 포커스 링 — 우주 테마와 조화
   ========================================= */
:focus-visible {
  outline: 1.5px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  transition: outline-offset var(--transition-fast);
}

/* =========================================
   Selection — 별빛 흰 선택 영역
   ========================================= */
::selection {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-primary);
}

/* =========================================
   Scrollbar
   ========================================= */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-base);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* =========================================
   Reduced Motion (Accessibility)
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Shimmer 정지 — 고정 그라디언트로 대체 */
  .gradient-text {
    animation: none !important;
    color: #ffffff;
    background: var(--gradient-text);
    background-size: 100% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* =========================================
   Utility Classes
   ========================================= */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-muted); }

/* 콘텐츠 최대 너비 제한 유틸리티 */
.max-w-prose { max-width: 68ch; }
.max-w-text  { max-width: 56ch; }