/* ============================================================================
 * tokens.css — 디자인 토큰 (단일 진실 공급원)
 * 색상 / 타이포 / 간격 / 반경 / 그림자 / 모션 등 모든 시각 값을 변수로 정의한다.
 * 테마 변경이나 다크/라이트 전환은 이 파일의 변수만 수정하면 된다.
 * 컨셉: "Dopamine" — 깊은 다크 베이스 + 비비드 그라데이션 + 글래스모피즘.
 * ========================================================================== */

:root {
  /* ----- 브랜드 그라데이션 (도파민 비비드) ----- */
  --brand-1: #7c3aed;   /* violet  */
  --brand-2: #d946ef;   /* fuchsia */
  --brand-3: #ec4899;   /* pink    */
  --brand-4: #f59e0b;   /* amber   */
  --gradient-brand: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-3) 50%, var(--brand-4) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(124,58,237,.18), rgba(236,72,153,.14) 55%, rgba(245,158,11,.12));
  --gradient-aurora: radial-gradient(60% 60% at 20% 10%, rgba(124,58,237,.28), transparent 60%),
                     radial-gradient(50% 50% at 90% 0%, rgba(236,72,153,.22), transparent 55%),
                     radial-gradient(60% 60% at 70% 90%, rgba(245,158,11,.14), transparent 60%);

  /* ----- 표면(배경) 레이어 ----- */
  --bg-0: #08070d;            /* 페이지 최하단 */
  --bg-1: #0d0b16;            /* 기본 배경 */
  --surface-1: rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.06);
  --surface-3: rgba(255,255,255,.09);
  --glass-bg: rgba(20,16,32,.55);
  --glass-border: rgba(255,255,255,.10);
  --glass-border-strong: rgba(255,255,255,.18);

  /* ----- 텍스트 ----- */
  --text-1: #f4f1fb;          /* 본문 강조 */
  --text-2: #c8c2da;          /* 본문 */
  --text-3: #8e87a3;          /* 보조 */
  --text-on-brand: #ffffff;

  /* ----- 시맨틱 ----- */
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --info: #60a5fa;

  /* ----- 타이포그래피 ----- */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;

  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 1.85rem;
  --fs-3xl: clamp(2.1rem, 4.5vw, 3.4rem);
  --fs-hero: clamp(2.6rem, 6vw, 4.6rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ----- 간격 (4px 스케일) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ----- 반경 ----- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ----- 그림자 / 글로우 ----- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.45);
  --glow-brand: 0 8px 40px rgba(124,58,237,.45), 0 4px 18px rgba(236,72,153,.35);
  --glow-soft: 0 0 0 1px rgba(255,255,255,.04), 0 12px 40px rgba(124,58,237,.18);

  /* ----- 블러 ----- */
  --blur-glass: 18px;

  /* ----- 레이아웃 ----- */
  --container-max: 1140px;
  --container-narrow: 760px;
  --header-h: 68px;

  /* ----- 모션 ----- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .14s;
  --dur-base: .26s;
  --dur-slow: .5s;

  /* ----- z-index 레이어 ----- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-toast: 900;
  --z-modal: 1000;

  color-scheme: dark;
}

/* 모션 최소화 선호 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .001s;
    --dur-base: .001s;
    --dur-slow: .001s;
  }
}