/* ============================================================
   NEXTM UX Center — CORE TOKENS (brand-neutral)
   모든 플랫폼 웹/상품페이지의 단일 정본. 색 정체성(brand primary/accent)만
   brands/*.css 오버레이로 분리. 이 파일의 토큰 외 하드코딩 금지.
   ============================================================ */

:root {
  /* ---------- Type family ----------
     글로벌 eSIM 커머스 톤: 기하학적/그로테스크 산세리프. 국문 Pretendard, 영문 Inter 계열. */
  --font-sans: 'Pretendard', 'Inter', 'Montserrat', 'Noto Sans JP',
               'Noto Sans TC', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);        /* 헤드라인도 동일 패밀리, weight로 대비 */
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ---------- Type scale (fluid, clamp: mobile → desktop) ----------
     대비가 큰 스케일이 premium. 헤드라인 tight, body 넉넉. */
  --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 3.75rem);  /* 40 → 60 */
  --fs-h1:      clamp(2rem,   1.4rem + 2.8vw, 3rem);     /* 32 → 48 */
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.9vw, 2.25rem);  /* 25.6 → 36 */
  --fs-h3:      clamp(1.35rem,1.1rem + 1.1vw, 1.75rem);  /* 21.6 → 28 */
  --fs-h4:      1.375rem;   /* 22 */
  --fs-lead:    1.25rem;    /* 20  인트로 문단 */
  --fs-body:    1.0625rem;  /* 17  본문 기본 (15px 미만 금지) */
  --fs-body-sm: 0.9375rem;  /* 15 */
  --fs-caption: 0.8125rem;  /* 13 */
  --fs-overline:0.75rem;    /* 12  overline/label */

  --lh-tight: 1.08;   /* display/h1 */
  --lh-head:  1.18;   /* h2-h4 */
  --lh-body:  1.65;   /* 본문 — 넉넉하게 */
  --lh-snug:  1.4;

  --tracking-tight:  -0.02em;  /* 큰 헤드라인 */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* overline UPPERCASE */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;   /* display */

  /* ---------- Spacing scale (4px base) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10:2.5rem;    /* 40 */
  --space-12:3rem;      /* 48 */
  --space-16:4rem;      /* 64 */
  --space-20:5rem;      /* 80  섹션 패딩 최소 */
  --space-24:6rem;      /* 96 */
  --space-30:7.5rem;    /* 120 섹션 패딩 넉넉 */
  --space-40:10rem;     /* 160 */

  /* 섹션 세로 리듬 (fluid) */
  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);   /* 56 → 120 */

  /* ---------- Layout ---------- */
  --container:       1200px;   /* 기본 콘텐츠 폭 */
  --container-wide:  1320px;
  --container-read:  720px;    /* 긴 본문 가독 폭 */
  --gutter:          var(--space-6);   /* 24 */
  --page-pad:        clamp(1rem, 0.5rem + 2.5vw, 2rem);  /* 좌우 여백 16 → 32 */

  /* ---------- Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;    /* 버튼·인풋 */
  --radius-md: 12px;   /* 카드 */
  --radius-lg: 16px;   /* 큰 카드·미디어 */
  --radius-xl: 24px;   /* 히어로 패널 */
  --radius-pill: 999px;

  /* ---------- Elevation (soft, low-opacity — 어두운 하드 그림자 금지) ---------- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-sm: 0 2px 6px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 6px 16px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04);
  --shadow-lg: 0 14px 36px rgba(16,24,40,0.10), 0 4px 8px rgba(16,24,40,0.05);
  --shadow-xl: 0 28px 64px rgba(16,24,40,0.14);
  --ring: 0 0 0 4px var(--accent-ring);   /* 포커스/선택 링 */

  /* ---------- Neutral ramp (cool slate — 순수 흑/회색 금지) ---------- */
  --ink-900: #0B1220;  /* 헤드라인·최강 텍스트 (순수 #000 금지) */
  --ink-800: #111A2E;
  --ink-700: #1E2A44;
  --ink-600: #334155;  /* 본문 텍스트 */
  --ink-500: #475569;
  --ink-400: #64748B;  /* muted 텍스트 */
  --ink-300: #94A3B8;
  --ink-200: #CBD5E1;  /* 보더 */
  --ink-100: #E2E8F0;
  --ink-50:  #F1F5F9;  /* 옅은 surface */
  --paper:   #FFFFFF;  /* 카드 배경 */
  --canvas:  #F8FAFC;  /* 페이지 배경 (순백보다 살짝 낮춤) */

  /* ---------- Semantic ---------- */
  --success: #12B76A;  --success-tint: #E7F8EF;
  --warning: #F79009;  --warning-tint: #FEF4E6;
  --danger:  #F04438;  --danger-tint:  #FEECEB;
  --info:    var(--accent);

  /* ---------- Accent (brands/*.css 가 덮어씀 — 아래는 안전 폴백: confident indigo) ---------- */
  --accent:        #4F46E5;
  --accent-600:    #4338CA;   /* hover */
  --accent-700:    #3730A3;   /* active */
  --accent-tint:   #EEF2FF;   /* 옅은 배경 */
  --accent-ring:   rgba(79,70,229,0.28);
  --accent-contrast:#FFFFFF;  /* accent 위 텍스트 */

  /* ---------- Hero surface (다크 히어로 = 기본 패턴) ----------
     브랜드가 라이트 히어로를 쓸 수 있다(brands.css 의 nx-mobile 참조). 그때
     히어로 위의 선·면까지 같이 뒤집혀야 하므로, 컴포넌트에서는 흰색 알파를
     직접 쓰지 말고 반드시 --hero-line / --hero-fill 을 경유한다. */
  --hero-bg:   #0B1220;
  --hero-bg-2: #131C33;   /* 그라디언트 두 번째 스톱 */
  --hero-text: #F8FAFC;
  --hero-muted:#94A3B8;
  --hero-line:        rgba(255,255,255,0.16);   /* 히어로 위 보더 */
  --hero-line-strong: rgba(255,255,255,0.28);
  --hero-fill:        rgba(255,255,255,0.06);   /* 히어로 위 칩·고스트 버튼 면 */
  --hero-fill-strong: rgba(255,255,255,0.10);

  /* ---------- Motion (subtle, ease-out) ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;

  /* ---------- Z ---------- */
  --z-header: 100;  --z-dropdown: 200;  --z-modal: 400;  --z-toast: 500;
}

/* 접근성: 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}