/* ═══════════════════════════════════════════════
   tokens.css — 심심프리 디자인 토큰 (유일한 소스)

   이 파일이 색·간격·크기·라운드의 **정의부**다.
   다른 CSS 는 값을 직접 쓰지 않고 반드시 여기 있는 변수를 참조한다.

   Load order: tokens → utilities → components → features → style
   (style.css 가 나중에 로드되어 컴포넌트 CSS 로 토큰을 덮어쓸 수 있다)

   관련 문서:
     docs/2.분석_설계/092_UI_디자인_시스템_통합_설계.md §4
     docs/3.구현예정/110_UI_디자인_시스템_통합_구현_계획.md §2.1
   ═══════════════════════════════════════════════ */

/* ─── 레이아웃 폭 ─────────────────────────────── */
:root {
  --content-max: 1400px;
  --reading-max: 780px;
  --auth-max: 430px;
}

/* ─── 색 (라이트) ─────────────────────────────── */
:root {
  /* 표면 */
  --paper:      #ffffff;              /* 카드·패널 */
  --canvas:     #f7f6fa;              /* 페이지 배경 */
  --surface:    #ffffff;              /* 입력·표 (백스테이지 별칭) */
  --line:       #e9e7ef;              /* 경계선 */
  --line-soft:  rgba(40, 32, 77, .06); /* 아주 옅은 경계 */

  /* 잉크 */
  --ink:        #20202b;              /* 본문 */
  --muted:      #6b6a78;              /* 보조 */
  --ink-invert: #ffffff;              /* 어두운 배경 위의 글자 */
  --white:      #ffffff;              /* 다크 모드에서도 유지되는 순백 */
  /* 브랜드색(--brand-primary) **위에** 놓이는 글자.
     다크에서 --brand-primary 가 밝은 보라(#a78bfa)로 뒤집히므로 흰 글자를 쓰면
     대비가 2.7:1 로 떨어진다(2026-10-23 다크 대비 감사에서 27건 적발).
     브랜드색을 배경으로 쓰는 곳은 흰색을 직접 쓰지 말고 이 토큰을 쓴다. */
  --on-brand:   #ffffff;

  /* 브랜드 */
  --brand-primary:      #6549d4;
  --brand-primary-soft: #eeeaff;
  /* 브랜드색의 RGB 성분 — **알파 변형**(틴트·그림자)을 만들 때 쓴다.
     `rgb(var(--brand-rgb) / .12)` 처럼 쓰면 브랜드를 바꿀 때 알파 변형이 자동으로 따라온다.
     리터럴 `rgba(112,89,223,.12)` 로 두면 예전 색(#7059df)에 남는다 — 실제로 그랬다. */
  --brand-rgb: 101 73 212;
  --lavender:      var(--brand-primary);
  --lavender-soft: var(--brand-primary-soft);
  --plum:          #382c67;            /* 짙은 자주: 제목·강조 */

  /* 액션 */
  --action-primary:       #7c3aed;
  --action-primary-hover: #6d28d9;
  --action-primary-soft:  rgba(124, 58, 237, 0.08);
  --action-primary-ring:  rgba(124, 58, 237, 0.15);

  /* CTA */
  --cta-bg:   #0f172a;
  --cta-text: #ffffff;

  /* 상태 (리뷰 134 §2.2 — 색만으로 성패를 구분하지 않도록 배너는 배경·경계·기호를 함께 쓴다) */
  --danger:       #b91c1c;
  --danger-soft:  #fef2f2;
  --danger-line:  #fecaca;
  --success:      #15803d;
  --success-soft: #f0fdf4;
  --success-line: #bbf7d0;
  --warning:      #b45309;
  --warning-soft: #fffbeb;
  --warning-line: #fde68a;

  /* 액센트 */
  --mint:  #55b89b;
  --coral: #f1786b;
  --gold:  #e8ab4c;
}

/* ─── 색 (다크) ───────────────────────────────── */
.dark {
  --paper:      #1e293b;
  --canvas:     #0f172a;
  --surface:    #1e293b;
  --line:       rgba(255, 255, 255, 0.08);
  --line-soft:  rgba(255, 255, 255, 0.04);

  --ink:        #e2e8f0;
  --muted:      #94a3b8;
  --ink-invert: #0a0a0c;
  /* 브랜드색이 밝아지므로 그 위의 글자는 어두워야 한다(대비 8:1 이상) */
  --on-brand:   #0a0a0c;

  --brand-primary:      #a78bfa;
  --brand-primary-soft: rgba(167, 139, 250, 0.1);
  /* 다크 브랜드(#a78bfa)의 RGB — 라이트와 같은 소비처가 테마에 맞는 틴트를 얻는다. */
  --brand-rgb: 167 139 250;
  --lavender:      var(--brand-primary);
  --lavender-soft: var(--brand-primary-soft);
  --plum:          #c4b5fd;

  --action-primary:       #a78bfa;
  --action-primary-hover: #c4b5fd;
  --action-primary-soft:  rgba(167, 139, 250, 0.12);
  --action-primary-ring:  rgba(255, 255, 255, 0.1);

  --cta-bg:   var(--gold);
  --cta-text: #0a0a0c;

  --danger:       #f87171;
  --danger-soft:  rgba(239, 68, 68, 0.10);
  --danger-line:  rgba(239, 68, 68, 0.28);
  --success:      #4ade80;
  --success-soft: rgba(34, 197, 94, 0.10);
  --success-line: rgba(34, 197, 94, 0.28);
  --warning:      #fbbf24;
  --warning-soft: rgba(245, 158, 11, 0.10);
  --warning-line: rgba(245, 158, 11, 0.28);

  --mint:  #5eead4;
  --coral: #fb7185;
  --gold:  #fcd34d;
}

/* ─── 라운드 ─────────────────────────────────── */
:root {
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 999px;
}

/* ─── 그림자 ─────────────────────────────────── */
:root {
  --shadow:       0 10px 28px rgba(40, 32, 77, .06);
  --shadow-hover: 0 14px 32px rgba(40, 32, 77, .10);
}
.dark {
  --shadow:       0 10px 28px rgba(0, 0, 0, .2);
  --shadow-hover: 0 14px 32px rgba(0, 0, 0, .3);
}

/* ─── 타이포 (15단계, 10~30px) ──────────────────
   **측정 후 재편(2026-10-23)**: 기존 8단계(11/12/13/14/16/18/22/28)는 측정 없이
   정해진 값이었다. 실제 CSS 를 세어 보니 15px(31건)·17px(16건)·20px(22건)·
   10px(10건)에 뚜렷한 덩어리가 있었고, 반대로 `--fs-3xl`(28px)은 리터럴 사용이
   0건이었다(실제 제목은 24·26·30px). 8단계에 밀어 넣으면 30곳이 1~2px 바뀐다.

   그래서 **실측 덩어리에 맞춰 확장**했다. 값은 지금 쓰이는 px 과 동일하므로
   화면 변화는 소수 반올림(≤1px, 7개 규칙)뿐이다.
   32px 이상(아이콘·이모지·hero 숫자)은 타이포가 아니라 **display** 라
   토큰화하지 않고 리터럴로 둔다.
   검사: `node scripts/snap-type-scale.cjs`
   ─────────────────────────────────────────── */
:root {
  --fs-2xs:  0.625rem;   /* 10px — 배지·모바일 내비 */
  --fs-xs:   0.6875rem;  /* 11px */
  --fs-sm:   0.75rem;    /* 12px */
  --fs-base: 0.8125rem;  /* 13px */
  --fs-md:   0.875rem;   /* 14px */
  --fs-15:   0.9375rem;  /* 15px — 게시판 그룹 제목·진행률 */
  --fs-lg:   1rem;       /* 16px */
  --fs-17:   1.0625rem;  /* 17px — 입력 필드(16px 미만이면 iOS 자동 확대) */
  --fs-xl:   1.125rem;   /* 18px */
  --fs-20:   1.25rem;    /* 20px — 섹션 제목 */
  --fs-2xl:  1.375rem;   /* 22px */
  --fs-24:   1.5rem;     /* 24px — 페이지 제목 */
  --fs-26:   1.625rem;   /* 26px */
  --fs-3xl:  1.75rem;    /* 28px */
  --fs-30:   1.875rem;   /* 30px */
}

/* ─── 스페이싱 (8단계) ────────────────────────── */
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
}

/* ─── 그 밖의 공용 값 (Phase 3B) ─────────────────
   이전에는 `var(--brown, #8b5e3c)` 처럼 **fallback 으로만** 동작하던 값이었다.
   토큰이 정의돼 있지 않아 화면은 fallback 으로 그려지고 있었고, 값을 바꾸려면
   사용처(`--brown` 26곳)를 모두 고쳐야 했다. 정의부로 올리고 fallback 을 걷어낸다.
   값은 지금 실제로 적용되던 fallback 과 **동일**하므로 시각 변화는 없다. */
:root {
  --brown:          #8b5e3c;                     /* 게시판·페이지저 계열 강조 */
  --gold-soft:      rgba(245, 158, 11, 0.12);    /* 금색 배지 배경 */
  --gold-soft-weak: rgba(245, 158, 11, 0.07);    /* 금색 배경(더 옅게) */
  --shadow-2xl:     0 25px 50px rgba(0, 0, 0, 0.25); /* 타로 카드 호버 */
}
/* 다크에서는 짙은 갈색이 배경(#1e293b)에 묻힌다(2.6:1) → 밝은 갈색으로 뒤집는다. */
.dark {
  --brown: #d6a97e;
}

/* ─── 브레이크포인트 (참고용 — CSS 변수로 쓸 수 없음) ──
   --bp-sm: 640px
   --bp-md: 880px
   --bp-lg: 1024px
   (기존 480/500/520/700/720/768/1280 은 Phase 3 에서 흡수) */