/* 디자인 토큰 — 모든 페이지가 이 파일 하나를 링크한다.
   여기서만 색과 크기를 정의하고, 다른 파일에는 리터럴을 두지 않는다.
   v3 A안 (2026-09-15): 화이트·쿨 뉴트럴 + 굵은 산세리프(Pretendard) + 갈래 색.
   시안: artifact 9f3ae78b (사용자 A안 확정). 명조·크림(v2)은 폐기. */

:root {
  color-scheme: light dark;

  /* 중립 — 쿨 뉴트럴 */
  --ink: #191c20;
  --sub: #576070;
  --line: #e6e9ed;
  --bg: #f9fafb;
  --card: #ffffff;
  --th-bg: #f0f2f5;

  /* 강조 기본값 — 갈래 없는 페이지의 링크·포커스. .cat-* 가 재정의 */
  --accent: #2563c4;
  --accent-ink: #ffffff;
  --accent-soft: #eef3fb;
  --accent-line: #c3d4ef;

  /* 상태 */
  --warn: #bb3d1d;
  --warn-bg: #fbeeea;
  --warn-line: #f0d0c4;
  --warn-ink: #8a2f14;
  --ok: #1e6b3a;
  --ok-bg: #e9f4ec;

  /* 갈래 색 — 6갈래. 홈 카드와 .cat-* 재정의가 쓴다 */
  --cat-silup: #2563c4;
  --cat-care: #0c7d52;
  --cat-inherit: #7c4fd0;
  --cat-home: #bb4f28;
  --cat-car: #8a6d10;
  --cat-pension: #0d7787;

  /* 표시용 서체 — 본문과 같은 산세리프 계열, 굵기·자간으로 위계를 만든다 */
  --display: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;

  /* 타이포 — 7단계. 이 밖의 크기는 쓰지 않는다 */
  --fs-hero: 2.125rem;
  --fs-h1: 1.75rem;
  --fs-h2: 1.2rem;
  --fs-h3: 1.05rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;

  --measure: 34em;
  --wrap-max: 34rem;
  --wide-max: 66rem;
  --tap: 44px;

  /* 모서리 — 시안 확정값 */
  --r-card: 16px;
  --r-ctl: 12px;
  --r-chip: 8px;
}

/* 갈래 페이지 — accent 일습을 갈래 색으로 */
.cat-silup   { --accent: var(--cat-silup);   --accent-soft: #eef3fb; --accent-line: #c3d4ef; }
.cat-care    { --accent: var(--cat-care);    --accent-soft: #e9f4ef; --accent-line: #bcdccc; }
.cat-inherit { --accent: var(--cat-inherit); --accent-soft: #f2eefb; --accent-line: #d6c8f0; }
.cat-home    { --accent: var(--cat-home);    --accent-soft: #faefe9; --accent-line: #ecc9b8; }
.cat-car     { --accent: var(--cat-car);     --accent-soft: #f5f0de; --accent-line: #ddd0a0; }
.cat-pension { --accent: var(--cat-pension); --accent-soft: #e8f3f5; --accent-line: #b8d9e0; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9ecf1;
    --sub: #9aa4b2;
    --line: #2a3038;
    --bg: #101318;
    --card: #191d24;
    --th-bg: #20252d;

    --accent: #82aef0;
    --accent-ink: #101318;
    --accent-soft: #1c2635;
    --accent-line: #33507a;

    --warn: #ff9d78;
    --warn-bg: #2c1a12;
    --warn-line: #4d2c1d;
    --warn-ink: #ffc0a4;
    --ok: #7fd096;
    --ok-bg: #14261a;

    --cat-silup: #82aef0;
    --cat-care: #5fd0a5;
    --cat-inherit: #bda2f2;
    --cat-home: #f2a284;
    --cat-car: #e0c25e;
    --cat-pension: #6fd0e2;
  }
  .cat-silup   { --accent-soft: #1c2635; --accent-line: #33507a; }
  .cat-care    { --accent-soft: #14261e; --accent-line: #2c5a45; }
  .cat-inherit { --accent-soft: #241d33; --accent-line: #4b3a70; }
  .cat-home    { --accent-soft: #2e1d15; --accent-line: #663a26; }
  .cat-car     { --accent-soft: #292414; --accent-line: #5a4c22; }
  .cat-pension { --accent-soft: #14262b; --accent-line: #2a5661; }
}

/* 키보드 포커스 */
:where(a, button, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}