/* ── Itdasy Design System v1 · tokens.css ──────────────────────────
   Source: 09_디자인시스템_v1.md §1 · §2 · §3
   이 파일이 유일한 토큰 원천(SSOT). style-base.css :root 는 alias만 유지. */

:root {
  /* §1 컬러 — 라이트 [2026-05-24 차분한 로즈 A] */
  --brand:         #D58A95;
  --brand-strong:  #BC6675;
  --brand-bg:      #F7EFF0;
  --bg:            #F2F4F6;
  --frame:         #E8ECF1;
  --surface:       #FFF;
  --surface-2:     #F7F8FA;
  --text:          #191F28;
  --text-muted:    #4E5968;
  --text-subtle:   #6B7684; /* [2026-06-10] 4.2:1→5.9:1 대비 상향 (AA) */
  --border:        rgba(0,0,0,.07);
  --border-strong: rgba(0,0,0,.14);
  --ok:     #16B55E;
  --warn:   #F59E0B;
  --danger: #EF4444;
  --info:   #3B82F6;

  /* PerfFix-CSS: backdrop-filter 제거용 RGB 변수 (rgba(var(--bg-rgb),0.97)) */
  --bg-rgb: 255,255,255;

  /* §3 반경 */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* §3 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* §3 그림자 */
  --shadow-sm:    0 2px 8px rgba(0,0,0,.04);
  --shadow-md:    0 8px 24px rgba(0,0,0,.08);
  --shadow-brand: 0 10px 24px rgba(213,138,149,.30);
  --shadow-xl:    0 24px 60px rgba(0,0,0,.18);

  /* §3 전역 */
  --stroke: 2;
}

/* §1 컬러 — 다크 v6 톤 (#000 배경 + 흰 hairline) */
html[data-theme="dark"] {
  --brand:         #FF8FA3;
  --brand-strong:  #FFA8B8;
  --brand-bg:      rgba(255,143,163,.20);
  --bg:            #000000;
  --frame:         #232325;
  --surface:       #18181A;
  --surface-2:     #232325;
  --text:          #FAFAFA;
  --text-muted:    #DDDDDD;
  --text-subtle:   #A8A8A8;
  --border:        rgba(255,255,255,.18);
  --border-strong: rgba(255,255,255,.28);
  --info:   #60A5FA;
  --bg-rgb: 26,26,26;
  --shadow-md:    0 8px 24px rgba(0,0,0,.40);
  --shadow-brand: 0 10px 24px rgba(255,143,163,.35);
}

/* §3.5 토스트 v2 다크모드 그림자 강화 */
html[data-theme="dark"] #itdToast { box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* §4 SVG 전역 기본값 — Lucide 라인 스타일 */
svg {
  stroke-width: var(--stroke);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Phase 5: 글로벌 포커스링 시스템 ───────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

button:focus-visible,
[role="button"]:focus-visible {
  outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--brand-bg);
}

/* [F1 2026-06-09] iOS 줌 방지: !important 제거 — viewport(user-scalable=no)로 줌 차단.
   컴포넌트별 font-size(13px 등) 복원됨. style-polish.css의 max(16px,1em) 규칙이 실입력 칸 커버. */

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip navigation — 본문 바로가기 */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  padding: 12px 20px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-md);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s;
}
.skip-nav:focus {
  top: 16px;
}