/* ============================================
   Design Tokens
   common-design.md § 1 디자인 토큰 기반
   ============================================ */

:root {
  /* ---- Color: Mono ---- */
  --color-mono-1: #222222;
  --color-mono-3: #333333;
  --color-mono-4: #666666;
  --color-mono-6: #CCCCCC;
  --color-mono-7: #EEEEEE;
  --color-white: #FFFFFF;
  --color-text-strong: #0E1116;
  --color-text-muted: #6B7280;
  --color-mosaic-bg: #F4F5F7;
  --color-footer-bg: #F3F3F3;       /* Figma 1990:626 */

  /* ---- Color: Brand (Point Blue) ---- */
  --point-blue-1: #4B75F2;
  --point-blue-2: #7EA7FF;
  --point-blue-3: #6B80F6;
  --point-blue-4: #5866FF;

  /* ---- Color: Accent ---- */
  --color-stripe-violet: #5866FF;   /* 30일 뱃지 */
  --color-stripe-purple: #7D88FF;   /* 기업·대학 뱃지 */
  --color-stat-purple: #7954E6;

  /* ---- Typography Sizes (PC) ---- */
  --text-display: 2.5rem;       /* 40px */
  --text-heading-1: 2rem;       /* 32px */
  --text-heading-2: 1.875rem;   /* 30px */
  --text-heading-3: 1.375rem;   /* 22px */
  --text-heading-l: 1.5rem;     /* 24px */
  --text-stat: 2.25rem;         /* 36px */
  --text-body-l: 1rem;          /* 16px */
  --text-body-m: 0.875rem;      /* 14px */
  --text-body-s: 0.84rem;       /* 13.5px */
  --text-label-m: 0.875rem;     /* 14px */
  --text-caption: 0.75rem;      /* 12px */

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-img: 10px;
  --radius-btn-rect: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-card-lg: 22px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-card-soft: 0 1px 0 rgba(16, 24, 40, 0.02), 0 8px 24px -12px rgba(16, 24, 40, 0.08);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-floating: 0 12px 32px rgba(0, 0, 0, 0.16);
  --shadow-cta-primary: 0 6px 18px -6px rgba(79, 107, 255, 0.55), 0 2px 4px rgba(79, 107, 255, 0.18);

  /* ---- Z-index ---- */
  /* 레거시 .popup_wrap(z-index: 900)보다 헤더가 낮아야 로그인/약관 등 팝업이 헤더 위에 보임 */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky-header: 800;
  --z-overlay: 1500;
  --z-modal: 2000;
  --z-toast: 3000;

  /* ---- Gradient ---- */
  --gradient-hero-text: linear-gradient(118deg, #4B75F2 0%, #7B5CFF 100%);
  --gradient-mosaic-d: linear-gradient(140deg, #2D6BFF 0%, #4F7BFF 50%, #6E8CFF 100%);
  --gradient-choice-text: linear-gradient(107deg, #2D6BFF 0%, #22C55E 100%);
  --gradient-accent: linear-gradient(135deg, var(--point-blue-3), var(--point-blue-4));
}

/* ---- Root font-size (BP별 자동 스케일) ---- */
html {
  font-size: 12px;
}
@media (min-width: 768px) {
  html { font-size: 14px; }
}
@media (min-width: 1280px) {
  html { font-size: 16px; }
}