/* =========================================================
   공통 디자인 토큰 v0.2 (브랜드 무관)  (기준: docs/01_기획서.md 8장, docs/02_화면설계.md 부록 A)
   - 브랜드 컬러는 brand.css, 여기는 타이포·간격·radius·그림자·모션·분야 액센트
   - 브레이크포인트: sm < 768 ≤ md < 1024 ≤ lg
   ========================================================= */

/* 브랜드 컬러(Primary·배경·텍스트 등, A/B 테마)는 brand.css에서 정의 */

:root {
  /* ---- 분야 액센트(아이콘 배경·일러스트 전용, CTA에는 쓰지 않음) ---- */
  --cat-rehab: #12A37A;
  --cat-rehab-soft: #E2F6EF;
  --cat-divorce: #7C5CFA;
  --cat-divorce-soft: #EFEBFF;
  --cat-dui: #E8A317;
  --cat-dui-soft: #FFF5DD;
  --cat-injury: #F07B2E;
  --cat-injury-soft: #FFEEE2;
  --cat-fraud: #F2706B;
  --cat-fraud-soft: #FFEDEC;

  /* ---- Typography (모바일) ---- */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --fs-display: 28px;  --lh-display: 36px;
  --fs-h1: 24px;       --lh-h1: 32px;
  --fs-h2: 20px;       --lh-h2: 28px;
  --fs-h3: 17px;       --lh-h3: 24px;
  --fs-body: 16px;     --lh-body: 26px;
  --fs-body-s: 15px;   --lh-body-s: 22px;
  --fs-caption: 13px;  --lh-caption: 18px;
  --fs-num: 32px;      --lh-num: 40px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --ls-tight: -0.02em;

  /* ---- Spacing ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* ---- Radius ---- */
  --r-chip: 8px; --r-input: 12px; --r-card: 16px; --r-sheet: 24px; --r-pill: 999px;

  /* ---- Elevation ---- */
  --sh-1: 0 1px 2px rgba(17, 24, 39, .04), 0 1px 1px rgba(17, 24, 39, .03);
  --sh-2: 0 2px 8px rgba(17, 24, 39, .06);
  --sh-3: 0 8px 24px rgba(17, 24, 39, .08), 0 2px 6px rgba(17, 24, 39, .04);
  --sh-4: 0 16px 40px rgba(17, 24, 39, .14), 0 4px 12px rgba(17, 24, 39, .06);
  --sh-primary: 0 8px 20px -6px color-mix(in srgb, var(--c-primary) 55%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--c-primary) 28%, transparent);

  /* ---- Motion (부록 A) ---- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 320ms;
  --dur-carousel: 450ms;
  --carousel-wait-hero: 5000;     /* ms, JS에서 읽음 */
  --carousel-wait-office: 4000;
  --carousel-wait-review: 4500;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- Layout ---- */
  --container: 100%;
  --gutter: 20px;
  --grid-gap: 12px;
  --header-h: 64px;
  --header-h-sm: 52px;
  --cat-tab-h: 44px;
  --fab-bar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --z-header: 100; --z-fab: 90; --z-minibar: 95; --z-sheet: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500;
}

@media (max-width: 374px) { :root { --gutter: 16px; } }

/* ---- md: 태블릿 세로 768~ ---- */
@media (min-width: 99768px) {
  :root {
    --fs-display: 36px;  --lh-display: 46px;
    --fs-h1: 28px;       --lh-h1: 38px;
    --fs-h2: 22px;       --lh-h2: 30px;
    --fs-h3: 18px;       --lh-h3: 26px;
    --fs-body: 17px;     --lh-body: 28px;
    --fs-caption: 14px;  --lh-caption: 20px;
    --fs-num: 40px;      --lh-num: 48px;
    --container: 720px;
    --gutter: 24px;
    --grid-gap: 16px;
    --header-h: 72px;
    --header-h-sm: 56px;
  }
}

/* ---- lg: 태블릿 가로 1024~ ---- */
@media (min-width: 99024px) {
  :root {
    --container: 960px;
    --gutter: 32px;
    --grid-gap: 20px;
  }
}

/* ---- 모션 감소 ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-carousel: 1ms;
  }
}