/* ============================================
   RELLA Design Tokens
   Theme: Soft Lavender + Ivory
   ============================================ */

:root {
  /* ─── Color: Primary (Lavender) ─── */
  --ui-primary-50:  #f3eeff;
  --ui-primary-100: #e7deff;
  --ui-primary-200: #cfc1ff;
  --ui-primary-300: #b39cff;
  --ui-primary-400: #8b72e6;
  --ui-primary-500: #5b43c6;
  --ui-primary-600: #4c36a8;
  --ui-primary-700: #3f2da8;

  /* ─── Color: Neutral (아이보리) ─── */
  --ui-ivory-50:  #fff9f2;
  --ui-ivory-100: #fbf4eb;
  --ui-ivory-200: #f3e8d8;
  --ui-ivory-300: #eadcc7;

  /* ─── Color: Semantic ─── */
  --ui-bg:           var(--ui-white);
  --ui-surface:      #ffffff;
  --ui-white:        #ffffff;
  --ui-text:         #1f1733;
  --ui-text-muted:   #6e6685;
  --ui-border:       #e9e1f2;
  --ui-star:         #f2b544;
  --ui-success:      #2e7d6b;
  --ui-error:        #c0392b;
  --ui-warning:      #8c5a2b;
  --ui-danger-bg:    #fef2f2;
  --ui-danger-border:#fecaca;
  --ui-error-bg-soft: rgba(192, 57, 43, 0.08);
  --ui-success-bg-soft: rgba(46, 125, 107, 0.06);
  --ui-overlay-dim: rgba(0, 0, 0, 0.4);
  --ui-overlay-strong: rgba(0, 0, 0, 0.75);
  --ui-overlay-label: rgba(0, 0, 0, 0.5);
  --ui-surface-frost: rgba(255, 255, 255, 0.9);
  --ui-border-subtle: rgba(0, 0, 0, 0.08);
  --ui-focus-ring: rgba(91, 67, 198, 0.14);

  /* ─── Typography ─── */
  --ui-font:         'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-font-display: 'Pretendard', sans-serif;
  --ui-leading-tight:  1.3;
  --ui-leading-normal: 1.6;

  /* Type scale (single source) */
  --ui-fs-display: 48px;
  --ui-lh-display: 56px;
  --ui-fs-h1: 36px;
  --ui-lh-h1: 44px;
  --ui-fs-h2: 28px;
  --ui-lh-h2: 36px;
  --ui-fs-h3: 22px;
  --ui-lh-h3: 30px;
  --ui-fs-body: 16px;
  --ui-lh-body: 24px;
  --ui-fs-caption: 14px;
  --ui-lh-caption: 20px;

  /* ─── Spacing (4px base) ─── */
  --ui-space-xs:  4px;
  --ui-space-sm:  8px;
  --ui-space-md:  16px;
  --ui-space-lg:  24px;
  --ui-space-xl:  32px;
  --ui-space-2xl: 48px;
  --ui-space-3xl: 64px;
  --ui-space-4xl: 96px;

  /* ─── Radius ─── */
  --ui-radius-sm:   6px;
  --ui-radius-md:  10px;
  --ui-radius-lg:  12px;
  --ui-radius-xl:  16px;
  --ui-radius-modal: 20px;
  --ui-radius-full: 9999px;

  /* ─── Shadow ─── */
  --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --ui-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16);
  --ui-shadow-top-sm: 0 -2px 12px rgba(0, 0, 0, 0.1);
  --ui-shadow-top-md: 0 -4px 12px rgba(0, 0, 0, 0.08);
  --ui-shadow-primary-sm: 0 4px 16px rgba(91, 67, 198, 0.3);
  --ui-shadow-primary-md: 0 6px 20px rgba(91, 67, 198, 0.4);

  /* ─── Container (NAV 기준에 연결 — 랜딩과 동일 폭 정렬) ─── */
  --ui-container-max:     var(--nav-page-max);
  --ui-content-max:       var(--nav-page-max);
  --ui-container-padding: var(--nav-page-gutter, 40px);

  /* Mobile CTA */
  --ui-mobile-cta-height: 64px;

  /* Funnel bottom bar reserve (fixed bar height + safe-area) */
  --ui-funnel-bottom-reserve: 160px;
  --ui-funnel-bottom-reserve-mobile: 180px;

  /* ─── Transition ─── */
  --ui-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ui-duration: 200ms;
}

@media (max-width: 768px) {
  :root {
    --ui-container-padding: var(--nav-page-gutter, 20px);
  }
}