/* ============================================================
   Bada International · Design Tokens
   Version : 3.0.0 — Full Apple Design System (2026-04-23)
   Source of truth: BRAND.md §10 · Reference: badaglobal-site v2.4.0
   Rationale (v3.0.0):
     - Primary CTA = Apple Blue #0071e3 (Chris 선택: Path A Full Apple)
     - Typography = SF Pro 시스템 스택 (웹폰트 로드 제거, OS 자동 선택)
     - Ink #1d1d1f / Stage #F5F5F7 / Off-white #FFFFFF
     - Radius: micro 5 / button 8 / search 11 / feature 12 / pill / circle
     - Tracking: SF Pro 정확값 (display/tile/body/caption)
     - Bada Blue + 도트 3색은 브랜드 시그니처 보존 (로고·악센트·카드 라벨)
     - 한글은 Pretendard CDN을 스택에 삽입 (시스템 스택 내부)
   ============================================================ */
:root {
  /* ===========================================================
     COLOR — Apple DS core + Bada signature
     =========================================================== */

  /* Apple Blue — primary CTA system (Chris Path A) */
  --brand-primary:         #0071e3;  /* Apple Blue */
  --brand-primary-hover:   #0066cc;  /* Apple Link Blue */
  --brand-primary-bright:  #2997ff;  /* dark-bg link */

  /* Bada Signature — 로고·시그니처 마크·특수 악센트 전용
     Primary CTA로 쓰지 않음. 로고 lockup, 카드 라벨, 마크 포인트. */
  --brand-bada-blue:       #1F4C9E;  /* Bada Blue */
  --brand-bada-deep:       #0E2858;  /* Deep Navy */

  /* Bada 도트 3종 — 카테고리/강조 포인트 전용. 한 섹션에 3색 남발 금지 */
  --brand-accent-orange:   #E88432;
  --brand-accent-yellow:   #EDB636;
  --brand-accent-green:    #7FB842;

  /* Neutrals — Apple 정렬 */
  --neutral-ink:           #1d1d1f;  /* Apple Near Black — primary text + 다크 버튼 */
  --neutral-stage:         #F5F5F7;  /* Apple Light Gray — 메인 body bg */
  --neutral-off:           #FFFFFF;  /* 순백 — muted section contrast */
  --neutral-pressed:       #ededf2;  /* 버튼 active / pressed */
  --neutral-filter:        #fafafc;  /* search / filter bg */
  --neutral-ink-80:        rgba(0, 0, 0, 0.80);  /* secondary text */
  --neutral-ink-48:        rgba(0, 0, 0, 0.48);  /* tertiary text */

  /* Apple dark surface elevation — 다크 섹션에서 사용 */
  --surface-1:             #272729;
  --surface-2:             #28282a;
  --surface-3:             #2a2a2d;
  --surface-4:             #242426;

  /* Legacy 호환 — 기존 컴포넌트 referencing에만 남김. 신규 사용 금지 */
  --neutral-white:         var(--neutral-off);
  --neutral-off-white:     var(--neutral-stage);
  --neutral-gray-100:      #F5F5F5;
  --neutral-gray-200:      #E5E5E5;
  --neutral-gray-500:      #737373;
  --neutral-charcoal:      var(--neutral-ink);

  /* Semantic */
  --sem-success:           var(--brand-accent-green);
  --sem-warning:           var(--brand-accent-yellow);
  --sem-info:              var(--brand-primary);
  --sem-danger:            #D64545;

  /* Division Palettes — 카드·서브페이지에서만 사용 */
  --div-bada-primary:      var(--brand-bada-blue);
  --div-bada-deep:         var(--brand-bada-deep);
  --div-bada-ink:          var(--neutral-off);

  --div-bee-primary:       #F0C038;  /* BeeReady Honey Yellow — 실제 포장 추출 (2026-04-24) */
  --div-bee-deep:          #C99A18;  /* Honey Deep — 포장 그림자 톤 */
  --div-bee-warm:          #F8D04C;  /* Honey Light — 하이라이트 */
  --div-bee-accent:        #2E5A47;  /* Forest / Botanical Green (bee logo 배경용) */
  --div-bee-ink:           var(--neutral-ink);

  --div-ritual-primary:    #3A1F0E;  /* Amber Brown */
  --div-ritual-cream:      #F4EEE2;  /* Label cream */
  --div-ritual-gold:       #C9A55F;  /* Pump gold */
  --div-ritual-teal:       #5A7A7A;
  --div-ritual-ink:        var(--div-ritual-cream);

  /* ===========================================================
     TYPOGRAPHY — Apple SF Pro 시스템 스택
     - macOS/iOS: 실제 SF Pro Display / SF Pro Text 자동
     - Windows: Segoe UI fallback
     - Android: Roboto fallback
     - 한글: Pretendard (CDN), 없으면 Apple SD Gothic Neo
     =========================================================== */
  --font-sans:      -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", "Pretendard", "Apple SD Gothic Neo", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:      ui-monospace, "SF Mono", "Menlo", Consolas, monospace;

  /* Legacy 호환 — 기존 참조용. 신규는 --font-sans 사용 */
  --font-display:   var(--font-sans);
  --font-body:      var(--font-sans);
  --font-korean:    var(--font-sans);

  /* SF Pro 정확값 tracking */
  --tracking-tight:   -0.005em;  /* Display Hero (-0.28px @56px) */
  --tracking-h3:       0.007em;  /* Tile Heading (0.196px @28px) */
  --tracking-body:    -0.022em;  /* Body (-0.374px @17px) */
  --tracking-caption: -0.016em;  /* Link / Caption */
  --tracking-btn:     -0.01em;   /* Button label */

  /* Fluid type scale — Apple 방향으로 재조정 */
  --text-display-xl:  clamp(40px, 5.5vw, 64px);
  --text-display-l:   clamp(32px, 4vw, 48px);
  --text-display-m:   clamp(24px, 3vw, 36px);
  --text-subhead:     clamp(18px, 1.5vw, 21px);
  --text-body-l:      17px;   /* Apple body spec */
  --text-body-m:      15px;   /* Apple UI / button */
  --text-small:       13px;
  --text-label:       11px;
  --text-caption:     12px;

  /* ===========================================================
     SPACING — Apple rem 기반 + 기존 8px grid 병행
     =========================================================== */
  --space-apple-2:  0.125rem;   /* 2px  */
  --space-apple-4:  0.25rem;    /* 4px  */
  --space-apple-6:  0.375rem;   /* 6px  */
  --space-apple-8:  0.5rem;     /* 8px  */
  --space-apple-10: 0.625rem;   /* 10px */
  --space-apple-14: 0.875rem;   /* 14px */
  --space-apple-17: 1.0625rem;  /* 17px */
  --space-apple-20: 1.25rem;    /* 20px */
  --space-apple-24: 1.5rem;     /* 24px */

  /* 기존 8px grid — 섹션/레이아웃용 유지 */
  --space-1:  8px;    --space-2:  16px;   --space-3:  24px;
  --space-4:  32px;   --space-6:  48px;   --space-8:  64px;
  --space-12: 96px;   --space-16: 128px;

  /* ===========================================================
     RADIUS — Apple scale (5/8/11/12/pill/circle)
     =========================================================== */
  --radius-micro:   0.3125rem;  /* 5px  — micro */
  --radius-sm:      0.3125rem;  /* legacy alias */
  --radius-button:  0.5rem;     /* 8px  — primary buttons (Chris: slightly rounded) */
  --radius-md:      0.5rem;     /* legacy alias → 8px */
  --radius-search:  0.6875rem;  /* 11px — search / filter */
  --radius-feature: 0.75rem;    /* 12px — feature cards */
  --radius-lg:      0.75rem;    /* legacy alias → 12px */
  --radius-pill:    980px;
  --radius-circle:  50%;

  /* ===========================================================
     SHADOW — Apple card elevation
     =========================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 3px 5px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.06), 0 20px 60px rgba(0, 0, 0, 0.10);
  --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.10);

  /* ===========================================================
     MOTION — Apple premium easing
     =========================================================== */
  --ease-premium:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-smooth: var(--ease-out);  /* legacy alias */
  --dur-fast:       200ms;
  --dur-base:       320ms;
  --dur-slow:       520ms;

  /* ===========================================================
     LAYOUT
     =========================================================== */
  --max-w:          1280px;
  --gutter-sm:      1rem;
  --gutter-md:      2rem;
  --gutter-lg:      4rem;

  /* Z-index */
  --z-nav:          50;
  --z-overlay:      80;
  --z-modal:        100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}