/* ==========================================================================
   tokens.css — DESIGN-stripe.md 의 값을 1:1 로 옮긴 디자인 토큰.
   이 파일의 값은 임의로 바꾸지 말고, DESIGN-stripe.md 가 바뀔 때만 갱신한다.
   ========================================================================== */

:root {
  /* ---------- Colors : brand & accent ---------- */
  --c-primary: #533afd;
  --c-primary-deep: #4434d4;
  --c-primary-press: #2e2b8c;
  --c-primary-soft: #665efd;
  --c-primary-subdued: #b9b9f9;
  --c-brand-dark-900: #1c1e54;

  --c-ruby: #ea2261;
  --c-magenta: #f96bee;
  --c-lemon: #9b6829;

  /* ---------- Colors : surface ---------- */
  --c-canvas: #ffffff;
  --c-canvas-soft: #f6f9fc;
  --c-canvas-cream: #f5e9d4;
  --c-hairline: #e3e8ee;
  --c-hairline-input: #a8c3de;

  /* ---------- Colors : text ---------- */
  --c-ink: #0d253d;
  --c-ink-secondary: #273951;
  --c-ink-mute: #64748d;
  --c-ink-mute-2: #61718a;
  --c-on-primary: #ffffff;

  --c-shadow-blue: #003770;

  /* ---------- Typography : family ----------
     Söhne 는 유료(Klim)라 DESIGN-stripe.md 가 지정한 대체안 Inter 300 을 쓴다.
     한글 글리프는 Inter 에 없으므로 골격이 가장 가까운 무료 서체 Pretendard 로 받는다. */
  --font-sans: 'Inter', 'Pretendard Variable', Pretendard, 'SF Pro Display', system-ui, -apple-system, sans-serif;

  /* ---------- Typography : display ---------- */
  --fs-display-xxl: 56px;
  --lh-display-xxl: 1.03;
  --ls-display-xxl: -1.4px;

  --fs-display-xl: 48px;
  --lh-display-xl: 1.15;
  --ls-display-xl: -0.96px;

  --fs-display-lg: 32px;
  --lh-display-lg: 1.1;
  --ls-display-lg: -0.64px;

  --fs-display-md: 26px;
  --lh-display-md: 1.12;
  --ls-display-md: -0.26px;

  /* ---------- Typography : heading ---------- */
  --fs-heading-lg: 22px;
  --lh-heading-lg: 1.1;
  --ls-heading-lg: -0.22px;

  --fs-heading-md: 20px;
  --lh-heading-md: 1.4;
  --ls-heading-md: -0.2px;

  --fs-heading-sm: 18px;
  --lh-heading-sm: 1.4;
  --ls-heading-sm: 0;

  /* ---------- Typography : body ---------- */
  --fs-body-lg: 16px;
  --fs-body-md: 15px;
  --lh-body: 1.4;

  --fs-body-tabular: 14px;
  --ls-body-tabular: -0.42px;

  --fs-button-md: 16px;
  --fs-button-sm: 14px;
  --lh-button: 1;

  --fs-caption: 13px;
  --ls-caption: -0.39px;

  --fs-micro: 11px;
  --fs-micro-cap: 10px;
  --lh-micro-cap: 1.15;
  --ls-micro-cap: 0.1px;

  /* ---------- Typography : weight ----------
     디스플레이는 무조건 300. 400 으로 올리면 브랜드의 여백감이 무너진다. */
  --fw-thin: 300;
  --fw-regular: 400;

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* ---------- Spacing (base 8px) ---------- */
  --s-xxs: 2px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --s-huge: 64px;

  /* 마케팅 섹션 패딩 64–96px / 카드 내부 32px / 대시보드 목업 24px */
  --section-y: 96px;
  --section-y-tight: 64px;
  --card-pad: 32px;
  --mockup-pad: 24px;

  /* ---------- Container ---------- */
  --container: 1200px;
  --gutter: 24px;

  /* ---------- Elevation ---------- */
  --elev-1: 0 1px 3px rgba(0, 55, 112, 0.08);
  --elev-2: 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.24s;
}

/* 태블릿 — 디스플레이 계단식 축소 (56 → 48 → 32 → 26 → 22) */
@media (max-width: 1023px) {
  :root {
    --fs-display-xxl: 44px;
    --ls-display-xxl: -1.1px;
    --fs-display-xl: 38px;
    --ls-display-xl: -0.76px;
    --section-y: 80px;
    --section-y-tight: 56px;
  }
}

/* 모바일 — 히어로 56 → 36px */
@media (max-width: 767px) {
  :root {
    --fs-display-xxl: 36px;
    --ls-display-xxl: -0.9px;
    --fs-display-xl: 30px;
    --ls-display-xl: -0.6px;
    --fs-display-lg: 26px;
    --ls-display-lg: -0.52px;
    --fs-display-md: 22px;
    --section-y: 64px;
    --section-y-tight: 48px;
    --card-pad: 24px;
    --gutter: 20px;
  }
}