/**
 * tokens.css — Design Token Declarations
 * reseale — 명품 리세일 마켓플레이스
 * 마켓플레이스 그린 팔레트 (#03C75A 기반)
 *
 * Breakpoints (CSS vars cannot be used in @media queries — documented here):
 * Mobile:  ~767px
 * Tablet:  768px ~ 1023px
 * Desktop: 1024px ~ 1279px
 * Wide:    1280px+
 */

@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&family=Noto+Sans+KR:wght@400;500;600&display=swap');

:root {

  /* ── Color: Brand Palette ── */
  --green:          #03C75A;
  --green-dark:     #019E47;
  --green-deeper:   #017A38;
  --green-light:    #E6F9EE;
  --green-mid:      #B3F0CE;

  --blue:           #1B6CF2;
  --blue-light:     #EBF1FE;

  --orange:         #FF6B00;
  --orange-light:   #FFF3E6;

  --red:            #E53935;
  --red-light:      #FDECEA;

  /* ── Color: Neutral Palette ── */
  --gray-50:   #F5F6F7;
  --gray-100:  #EAECEE;
  --gray-200:  #E5E7EB;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-800:  #1F2937;
  --gray-900:  #111827;

  /* ── Color: Primary (maps to green) ── */
  --primary:            var(--green);
  --primary-dark:       var(--green-dark);
  --primary-deeper:     var(--green-deeper);
  --primary-light:      var(--green-light);
  --primary-lightest:   #F0FBF5;
  --on-primary:         #ffffff;
  --primary-container:  var(--green-light);

  /* ── Color: Status ── */
  --error:         var(--red);
  --error-light:   var(--red-light);
  --on-error:      #ffffff;
  --success:       var(--green);
  --success-light: var(--green-light);
  --warning:       var(--orange);
  --warning-light: var(--orange-light);
  --info:          var(--blue);
  --info-light:    var(--blue-light);

  /* ── Color: Surface Hierarchy ── */
  --surface-page:             #ffffff;
  --surface:                  #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low:    #ffffff;
  --surface-container:        var(--gray-100);
  --surface-container-high:   var(--gray-200);
  --surface-container-highest: var(--gray-300);

  /* ── Color: On-Surface ── */
  --on-surface:         var(--gray-900);
  --on-surface-variant: var(--gray-500);
  --text-primary:       var(--gray-900);
  --text-secondary:     var(--gray-500);
  --text-tertiary:      var(--gray-400);
  --text-disabled:      var(--gray-300);

  /* ── Color: Outline / Border ── */
  --outline:         var(--gray-200);
  --outline-variant: var(--gray-100);
  --border:          var(--gray-200);
  --border-hover:    var(--gray-300);
  --divider:         var(--gray-100);

  /* ── Color: Legacy aliases (이전 코드 호환) ── */
  --ink:        var(--gray-900);
  --ink-soft:   var(--gray-700);
  --cream:      var(--gray-50);
  --paper:      var(--gray-100);
  --rule:       var(--gray-200);
  --muted:      var(--gray-500);
  --text-body:  var(--gray-800);
  --red-soft:   var(--red-light);
  --red-deep:   #C62828;
  --gold:       #A47E3B;

  /* ── Typography: Font Families ── */
  --font-display: 'Pretendard', 'Apple SD Gothic Neo', 'Inter', 'Noto Sans KR', system-ui, sans-serif;
  --font-body:    'Pretendard', 'Apple SD Gothic Neo', 'Inter', 'Noto Sans KR', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Typography: Font Size Scale ── */
  --fs-display-lg:  2rem;
  --fs-display-md:  1.75rem;
  --fs-headline-lg: 1.5rem;
  --fs-headline-sm: 1.25rem;
  --fs-title-lg:    1.125rem;
  --fs-title-md:    1rem;
  --fs-title-sm:    0.9375rem;
  --fs-body-lg:     0.9375rem;
  --fs-body-md:     0.875rem;
  --fs-body-sm:     0.8125rem;
  --fs-label-lg:    0.75rem;
  --fs-label-sm:    0.6875rem;
  --fs-badge:       0.625rem;

  /* ── Typography: Letter Spacing ── */
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-wider:    0.05em;
  --ls-widest:   0.1em;
  --ls-display:  -0.02em;
  --ls-title:    0;
  --ls-body:     0;
  --ls-label:    0.02em;
  --ls-button:   0.02em;
  --ls-mono:     0;

  /* ── Typography: Line Height ── */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   1.8;
  --lh-display:  1.2;
  --lh-headline: 1.35;
  --lh-title:    1.35;
  --lh-body:     1.6;
  --lh-label:    1.4;

  /* ── Spacing Scale (4px base unit) ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;

  /* ── Border Radius — 마켓플레이스 스타일 ── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-base: 6px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ── Elevation / Shadow ── */
  --shadow-xs:     0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:     0 2px 6px rgba(0,0,0,.06);
  --shadow-md:     0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.10);
  --shadow-xl:     0 16px 48px rgba(0,0,0,.12);
  --shadow-card:   0 2px 6px rgba(0,0,0,.06);
  --shadow-header: 0 1px 0 var(--border);
  --shadow-ambient: 0 4px 16px rgba(0,0,0,.08);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, var(--gray-50) 100%);
  --gradient-ink:     linear-gradient(180deg, var(--gray-900) 0%, var(--gray-700) 100%);

  /* ── Glass ── */
  --glass-bg:   rgba(255,255,255,0.92);
  --glass-blur: blur(12px);

  /* ── Z-index Scale ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-header:   200;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* ── Layout ── */
  --container-max:   1440px;
  --container-inner: 1200px;
  --header-height:   56px;
  --header-total:    104px;
  --gnb-height:      48px;
  --bottom-nav-h:    60px;

  /* ── Transition ── */
  --transition-fast:   80ms  ease;
  --transition-base:  150ms  ease;
  --transition-slow:  250ms  ease-in-out;
  --transition-bounce: 200ms cubic-bezier(0.34,1.56,0.64,1);

  /* ── Touch Target ── */
  --touch-min: 44px;
}