/* =========================================================
   bidio — 디자인 토큰
   기획서 §20.1 기준 + 브랜드 확장 (그라데이션/엘리베이션/모션)
   ========================================================= */
:root {
  /* 브랜드 */
  --color-primary:        #1a365d;
  --color-primary-600:    #24497a;
  --color-primary-hover:  #2d4a7a;
  --color-accent:         #d4a017;
  --color-accent-600:     #b78712;
  --color-accent-soft:    #fef3c7;

  /* 그라데이션 */
  --grad-primary: linear-gradient(135deg, #1a365d 0%, #3b5a8f 100%);
  --grad-hero:    linear-gradient(135deg, #152c4c 0%, #1e3d6b 50%, #2d4f85 100%);
  --grad-accent:  linear-gradient(135deg, #d4a017 0%, #f0b93b 100%);
  --grad-gold-chip: linear-gradient(135deg, #d4a017 0%, #b78712 100%);

  /* 상태 */
  --color-success:        #16a34a;
  --color-success-soft:   #dcfce7;
  --color-warning:        #ea580c;
  --color-warning-soft:   #fff7ed;
  --color-danger:         #dc2626;
  --color-danger-soft:    #fee2e2;
  --color-info:           #0284c7;
  --color-info-soft:      #e0f2fe;

  /* 중립 */
  --color-text:           #0f172a;
  --color-text-muted:     #64748b;
  --color-text-subtle:    #94a3b8;
  --color-bg:             #ffffff;
  --color-bg-subtle:      #f8fafc;
  --color-bg-muted:       #f1f5f9;
  --color-border:         #e2e8f0;
  --color-border-strong:  #cbd5e1;

  /* 타이포 */
  --font-sans:   'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono:   'JetBrains Mono', Consolas, monospace;
  --font-display: 'Pretendard', sans-serif; /* 큰 타이틀 */

  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    1.875rem;
  --text-4xl:    2.25rem;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;

  /* 간격 (8px 그리드) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* 반경 */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Elevation (플랫한 기본 + 점진) */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 2px 4px -1px rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
  --shadow-md: 0 6px 10px -3px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 12px 20px -6px rgb(15 23 42 / 0.12), 0 4px 6px -4px rgb(15 23 42 / 0.06);
  --shadow-xl: 0 24px 32px -12px rgb(15 23 42 / 0.18), 0 8px 10px -6px rgb(15 23 42 / 0.08);
  --shadow-primary-glow: 0 8px 24px -8px rgb(26 54 93 / 0.45);
  --shadow-accent-glow:  0 8px 20px -6px rgb(212 160 23 / 0.45);

  /* 레이아웃 */
  --tab-bar-height: 64px;
  --header-height:  64px;
  --safe-bottom:    env(safe-area-inset-bottom, 0);
  --content-max:    1200px;

  /* 모션 */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;
}

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