/* =============================================================
   GuDoC Design Tokens v2
   ─────────────────────────────────────────────────────────────
   레이어 구조 (3-tier):
     1) Primitive  — 원시 값 (--gudoc-blue-500, --gudoc-space-4)
     2) Semantic   — 의미 토큰 (--color-bg, --color-text-primary)
     3) Component  — 컴포넌트 지역 변수 (--card-radius, --chip-bg)

   원칙:
   - 컴포넌트 CSS는 Semantic 토큰만 참조 (Primitive 직접 사용 금지)
   - 모드 전환은 Semantic 레이어에서만 발생 → 컴포넌트는 무지성으로 동작
   - hex 값 직접 사용 금지. var(--*) 만 사용
   ============================================================= */

/* -------------------------------------------------------------
   1) PRIMITIVES — 절대 컴포넌트에서 직접 쓰지 말 것
   ------------------------------------------------------------- */
:root {
  /* Brand — Coral (사용자 선택: Vivid Coral 계열) */
  --gudoc-coral-50:  #FFF1ED;
  --gudoc-coral-100: #FFDCD0;
  --gudoc-coral-200: #FFB69E;
  --gudoc-coral-300: #FF8B66;
  --gudoc-coral-400: #FF6E45;
  --gudoc-coral-500: #FF5A36;  /* PRIMARY */
  --gudoc-coral-600: #E64523;
  --gudoc-coral-700: #BF3717;
  --gudoc-coral-800: #8F2810;
  --gudoc-coral-900: #5C1808;

  /* Neutral — Warm gray (코랄과 어울리는 따뜻한 회색) */
  --gudoc-gray-0:   #FFFFFF;
  --gudoc-gray-50:  #FAFAF9;
  --gudoc-gray-100: #F4F4F2;
  --gudoc-gray-200: #E8E7E4;
  --gudoc-gray-300: #D4D2CD;
  --gudoc-gray-400: #A8A6A0;
  --gudoc-gray-500: #78766F;
  --gudoc-gray-600: #545249;
  --gudoc-gray-700: #3A3833;
  --gudoc-gray-800: #232220;
  --gudoc-gray-900: #141413;
  --gudoc-gray-950: #0A0A09;

  /* Functional */
  --gudoc-success-500: #1F8E5C;
  --gudoc-success-600: #167048;
  --gudoc-warning-500: #E8A317;
  --gudoc-warning-600: #B8800F;
  --gudoc-danger-500:  #DC3535;
  --gudoc-danger-600:  #B82828;
  --gudoc-info-500:    #2563EB;

  /* Subscription cycle accent (구독 주기 시각화 전용) */
  --gudoc-cycle-monthly:   #FF5A36;  /* coral */
  --gudoc-cycle-weekly:    #2563EB;  /* blue */
  --gudoc-cycle-quarterly: #7C3AED;  /* violet */
  --gudoc-cycle-yearly:    #1F8E5C;  /* green */
  --gudoc-cycle-onetime:   #78766F;  /* gray */

  /* Spacing scale (4px base) */
  --gudoc-space-0:  0;
  --gudoc-space-1:  4px;
  --gudoc-space-2:  8px;
  --gudoc-space-3:  12px;
  --gudoc-space-4:  16px;
  --gudoc-space-5:  20px;
  --gudoc-space-6:  24px;
  --gudoc-space-8:  32px;
  --gudoc-space-10: 40px;
  --gudoc-space-12: 48px;
  --gudoc-space-16: 64px;
  --gudoc-space-20: 80px;

  /* Radius — 앱 친화적, 약간 둥글게 */
  --gudoc-radius-xs:   4px;
  --gudoc-radius-sm:   8px;
  --gudoc-radius-md:   12px;
  --gudoc-radius-lg:   16px;
  --gudoc-radius-xl:   20px;
  --gudoc-radius-2xl:  28px;
  --gudoc-radius-pill: 9999px;

  /* Typography — Wanted Sans 우선, Pretendard fallback */
  --gudoc-font-sans:
    'Wanted Sans Variable', 'Wanted Sans',
    'Pretendard Variable', 'Pretendard',
    -apple-system, BlinkMacSystemFont, system-ui,
    'Apple SD Gothic Neo', sans-serif;
  --gudoc-font-mono:
    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem 기반) */
  --gudoc-text-2xs:  0.6875rem;  /* 11 — micro labels */
  --gudoc-text-xs:   0.75rem;    /* 12 — captions */
  --gudoc-text-sm:   0.8125rem;  /* 13 — meta */
  --gudoc-text-base: 0.9375rem;  /* 15 — body (한글 가독성) */
  --gudoc-text-md:   1rem;       /* 16 */
  --gudoc-text-lg:   1.125rem;   /* 18 — card title */
  --gudoc-text-xl:   1.375rem;   /* 22 — section title */
  --gudoc-text-2xl:  1.75rem;    /* 28 — page title */
  --gudoc-text-3xl:  2.25rem;    /* 36 — hero */
  --gudoc-text-4xl:  3rem;       /* 48 — display */

  --gudoc-leading-tight:  1.25;
  --gudoc-leading-snug:   1.375;
  --gudoc-leading-normal: 1.5;
  --gudoc-leading-relaxed: 1.625;

  --gudoc-weight-regular: 400;
  --gudoc-weight-medium:  500;
  --gudoc-weight-semibold: 600;
  --gudoc-weight-bold:    700;

  /* Motion */
  --gudoc-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --gudoc-ease-emphasis: cubic-bezier(0.3, 0, 0.1, 1); /* @kind other */
  --gudoc-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --gudoc-duration-1: 80ms; /* @kind other */
  --gudoc-duration-2: 150ms; /* @kind other */
  --gudoc-duration-3: 240ms; /* @kind other */
  --gudoc-duration-4: 360ms; /* @kind other */
  --gudoc-duration-5: 500ms; /* @kind other */

  /* Z-index scale */
  --gudoc-z-base: 0; /* @kind other */
  --gudoc-z-sticky: 100; /* @kind other */
  --gudoc-z-overlay: 500; /* @kind other */
  --gudoc-z-modal: 1000; /* @kind other */
  --gudoc-z-toast: 2000; /* @kind other */

  /* Layout */
  --gudoc-container-max: 1440px;
  --gudoc-sidebar-width: 13rem;
  --gudoc-topbar-height: 3.75rem;
  --gudoc-bottomnav-height: 3.5rem;
}

/* -------------------------------------------------------------
   2) SEMANTIC — Light Mode (default)
   컴포넌트는 이 토큰만 참조한다
   ------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Surfaces (페이지 → 카드 → 떠있는 요소) */
  --color-bg:            var(--gudoc-gray-0);
  --color-bg-subtle:     var(--gudoc-gray-50);
  --color-surface:       var(--gudoc-gray-0);
  --color-surface-raised: var(--gudoc-gray-0);
  --color-surface-sunken: var(--gudoc-gray-100);
  --color-overlay:       rgba(20, 20, 19, 0.5);

  /* Text */
  --color-text:          var(--gudoc-gray-900);
  --color-text-strong:   var(--gudoc-gray-950);
  --color-text-muted:    var(--gudoc-gray-600);
  --color-text-subtle:   var(--gudoc-gray-500);
  --color-text-on-brand: var(--gudoc-gray-0);

  /* Border / divider */
  --color-border:        var(--gudoc-gray-200);
  --color-border-strong: var(--gudoc-gray-300);
  --color-divider:       var(--gudoc-gray-100);

  /* Brand */
  --color-brand:         var(--gudoc-coral-500);
  --color-brand-hover:   var(--gudoc-coral-600);
  --color-brand-active:  var(--gudoc-coral-700);
  --color-brand-subtle:  var(--gudoc-coral-50);
  --color-brand-text:    var(--gudoc-coral-700);

  /* Functional */
  --color-success:       var(--gudoc-success-500);
  --color-success-bg:    #E6F4ED;
  --color-warning:       var(--gudoc-warning-500);
  --color-warning-bg:    #FFF6E0;
  --color-danger:        var(--gudoc-danger-500);
  --color-danger-bg:     #FCE8E8;
  --color-info:          var(--gudoc-info-500);

  /* Interactive states */
  --color-hover-bg:      var(--gudoc-gray-100);
  --color-active-bg:     var(--gudoc-gray-200);
  --color-focus-ring:    var(--gudoc-coral-400);

  /* Shadows (앱 친화적, 부드럽게) */
  --shadow-xs:  0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-sm:  0 2px 6px rgba(20, 20, 19, 0.06);
  --shadow-md:  0 6px 16px rgba(20, 20, 19, 0.08);
  --shadow-lg:  0 12px 32px rgba(20, 20, 19, 0.10);
  --shadow-xl:  0 24px 48px rgba(20, 20, 19, 0.14);

  /* Subscription cycle (라이트) */
  --color-cycle-monthly:   var(--gudoc-cycle-monthly);
  --color-cycle-weekly:    var(--gudoc-cycle-weekly);
  --color-cycle-quarterly: var(--gudoc-cycle-quarterly);
  --color-cycle-yearly:    var(--gudoc-cycle-yearly);
  --color-cycle-onetime:   var(--gudoc-cycle-onetime);

  color-scheme: light;
}

/* -------------------------------------------------------------
   2-2) SEMANTIC — Dark Mode (OLED 친화적)
   ------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg:            var(--gudoc-gray-950);
  --color-bg-subtle:     var(--gudoc-gray-900);
  --color-surface:       var(--gudoc-gray-900);
  --color-surface-raised: var(--gudoc-gray-800);
  --color-surface-sunken: var(--gudoc-gray-950);
  --color-overlay:       rgba(0, 0, 0, 0.7);

  --color-text:          var(--gudoc-gray-50);
  --color-text-strong:   var(--gudoc-gray-0);
  --color-text-muted:    var(--gudoc-gray-300);
  --color-text-subtle:   var(--gudoc-gray-400);
  --color-text-on-brand: var(--gudoc-gray-0);

  --color-border:        var(--gudoc-gray-700);
  --color-border-strong: var(--gudoc-gray-600);
  --color-divider:       var(--gudoc-gray-800);

  --color-brand:         var(--gudoc-coral-400);
  --color-brand-hover:   var(--gudoc-coral-300);
  --color-brand-active:  var(--gudoc-coral-200);
  --color-brand-subtle:  rgba(255, 90, 54, 0.12);
  --color-brand-text:    var(--gudoc-coral-300);

  --color-success:       #34C77F;
  --color-success-bg:    rgba(31, 142, 92, 0.15);
  --color-warning:       #F5BB3F;
  --color-warning-bg:    rgba(232, 163, 23, 0.15);
  --color-danger:        #F26B6B;
  --color-danger-bg:     rgba(220, 53, 53, 0.18);
  --color-info:          #5B8DF6;

  --color-hover-bg:      var(--gudoc-gray-800);
  --color-active-bg:     var(--gudoc-gray-700);
  --color-focus-ring:    var(--gudoc-coral-300);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 6px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.7);

  --color-cycle-monthly:   #FF7B5C;
  --color-cycle-weekly:    #5B8DF6;
  --color-cycle-quarterly: #A66BFF;
  --color-cycle-yearly:    #34C77F;
  --color-cycle-onetime:   var(--gudoc-gray-400);

  color-scheme: dark;
}

/* -------------------------------------------------------------
   2-3) SEMANTIC — Modern Mode (브랜드 시그니처)
   코랄을 적극 활용한 따뜻한 크림 베이스 — 마케팅·랜딩 페이지
   ------------------------------------------------------------- */
[data-theme="modern"] {
  --color-bg:            #FFF8F4;        /* warm cream */
  --color-bg-subtle:     #FFEFE6;
  --color-surface:       var(--gudoc-gray-0);
  --color-surface-raised: var(--gudoc-gray-0);
  --color-surface-sunken: #FFEFE6;
  --color-overlay:       rgba(92, 24, 8, 0.5);

  --color-text:          var(--gudoc-coral-900);
  --color-text-strong:   #2A0E04;
  --color-text-muted:    var(--gudoc-coral-800);
  --color-text-subtle:   var(--gudoc-gray-500);
  --color-text-on-brand: var(--gudoc-gray-0);

  --color-border:        #FFDCD0;
  --color-border-strong: var(--gudoc-coral-200);
  --color-divider:       #FFEFE6;

  --color-brand:         var(--gudoc-coral-500);
  --color-brand-hover:   var(--gudoc-coral-600);
  --color-brand-active:  var(--gudoc-coral-700);
  --color-brand-subtle:  var(--gudoc-coral-50);
  --color-brand-text:    var(--gudoc-coral-700);

  --color-success:       var(--gudoc-success-500);
  --color-success-bg:    #E6F4ED;
  --color-warning:       var(--gudoc-warning-500);
  --color-warning-bg:    #FFF6E0;
  --color-danger:        var(--gudoc-danger-500);
  --color-danger-bg:     #FCE8E8;
  --color-info:          var(--gudoc-info-500);

  --color-hover-bg:      var(--gudoc-coral-50);
  --color-active-bg:     var(--gudoc-coral-100);
  --color-focus-ring:    var(--gudoc-coral-400);

  --shadow-xs:  0 1px 2px rgba(255, 90, 54, 0.08);
  --shadow-sm:  0 2px 6px rgba(255, 90, 54, 0.10);
  --shadow-md:  0 8px 20px rgba(255, 90, 54, 0.14);
  --shadow-lg:  0 16px 36px rgba(255, 90, 54, 0.18);
  --shadow-xl:  0 28px 56px rgba(255, 90, 54, 0.22);

  --color-cycle-monthly:   var(--gudoc-cycle-monthly);
  --color-cycle-weekly:    var(--gudoc-cycle-weekly);
  --color-cycle-quarterly: var(--gudoc-cycle-quarterly);
  --color-cycle-yearly:    var(--gudoc-cycle-yearly);
  --color-cycle-onetime:   var(--gudoc-cycle-onetime);

  color-scheme: light;
}

/* -------------------------------------------------------------
   3) COMPONENT — 지역 변수 예시 (각 컴포넌트 파일에서 정의)
   여기는 "어떻게 쓰는지" 보여주는 예시일 뿐
   ------------------------------------------------------------- */

/* 예시: ProductCard */
.gd-product-card {
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--gudoc-radius-lg);
  --card-padding: var(--gudoc-space-3);
  --card-shadow: var(--shadow-xs);
  --card-shadow-hover: var(--shadow-md);
}

/* 예시: Button */
.gd-btn {
  --btn-radius: var(--gudoc-radius-md);
  --btn-padding-y: var(--gudoc-space-3);
  --btn-padding-x: var(--gudoc-space-5);
  --btn-font-weight: var(--gudoc-weight-semibold);
}

/* -------------------------------------------------------------
   Auto-detect — 사용자 OS 다크모드 자동 적용 (data-theme 미설정 시)
   ------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:            var(--gudoc-gray-950);
    --color-bg-subtle:     var(--gudoc-gray-900);
    --color-surface:       var(--gudoc-gray-900);
    --color-surface-raised: var(--gudoc-gray-800);
    --color-surface-sunken: var(--gudoc-gray-950);
    --color-text:          var(--gudoc-gray-50);
    --color-text-strong:   var(--gudoc-gray-0);
    --color-text-muted:    var(--gudoc-gray-300);
    --color-text-subtle:   var(--gudoc-gray-400);
    --color-border:        var(--gudoc-gray-700);
    --color-border-strong: var(--gudoc-gray-600);
    --color-divider:       var(--gudoc-gray-800);
    --color-brand:         var(--gudoc-coral-400);
    --color-hover-bg:      var(--gudoc-gray-800);
    --color-active-bg:     var(--gudoc-gray-700);
    color-scheme: dark;
  }
}

/* -------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gudoc-duration-1: 0ms; /* @kind other */
    --gudoc-duration-2: 0ms; /* @kind other */
    --gudoc-duration-3: 0ms; /* @kind other */
    --gudoc-duration-4: 0ms; /* @kind other */
    --gudoc-duration-5: 0ms; /* @kind other */
  }
}