/* 테마.css — 크라우니모듈망 서비스 토큰
   규약: 색은 여기서만 정의하고 뷰는 var()만 소비한다. 중앙CSS(크라우니디자인.css)의 토큰을 먼저 쓰고,
   중앙CSS가 못 올 때를 위한 폴백만 최소 개수로 둔다(하드코딩 색 최소화). */
:root{
  /* 중앙CSS 토큰 재사용 — 폴백은 4상 의미색 4개로 한정 */
  --면: var(--card, Canvas);
  --바닥: var(--bg, Canvas);
  --글: var(--text, CanvasText);
  --글흐림: var(--text2, GrayText);
  --선: var(--border, ButtonBorder);
  --강조: var(--accent, color-mix(in srgb, gold 62%, CanvasText 14%));

  /* 4상 의미색 — 티(여유)·옴(경고)·타(포화)·음(미설정) */
  --티: color-mix(in srgb, green 62%, CanvasText 8%);
  --옴: color-mix(in srgb, orange 72%, CanvasText 18%);
  --타: color-mix(in srgb, red 58%, CanvasText 14%);
  --음: GrayText;

  --반경: 14px;
  --반경작게: 10px;
  --반경알약: 999px;
  --여백: 16px;
  --전이: 160ms ease;
  --그림자: 0 1px 3px color-mix(in srgb, CanvasText 8%, transparent);
  --강조약: color-mix(in srgb, var(--강조) 12%, transparent);
}

/* 상호작용 상태 — 손이 닿는 모든 것에 반응이 있어야 한다 */
button, a, input, select, summary{ transition: background var(--전이), border-color var(--전이), color var(--전이), box-shadow var(--전이), transform var(--전이); }
button:hover{ filter: brightness(1.06); }
button:active{ transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{
  outline: 2px solid var(--강조); outline-offset: 2px;
}
input:focus, select:focus{ border-color: var(--강조); box-shadow: 0 0 0 4px var(--강조약); }
input:hover, select:hover{ border-color: var(--강조); }
a{ color: var(--강조); text-decoration-color: var(--강조약); }
a:hover{ text-decoration-thickness: 2px; }
tr:hover > td{ background: var(--강조약); }
@media (prefers-reduced-motion: reduce){
  button, a, input, select, summary{ transition: none; }
  button:active{ transform: none; }
}