/*
 * @iyulab/u-widgets — **@iyulab/components 토큰 브리지** (선택적 로드)
 * ==========================================================================
 *
 *   import '@iyulab/u-widgets/themes/components.css';
 *   // 또는 CSS 에서: @import "@iyulab/u-widgets/themes/components.css";
 *
 * 이 한 장은 `--u-widget-*` 를 `@iyulab/components` 의 `--u-*` 축에 **잇는다.**
 * 값을 복제하지 않고 `var()` 로 참조하므로, 하우스 시트가 바뀌면 위젯도 따라간다.
 *
 * ──────────────────────────────────────────────────────────────────────────
 * ★★계약 — 이 네 줄이 이 파일의 전부다.
 * ──────────────────────────────────────────────────────────────────────────
 *   ⑴ **선택적 로드다.** 이 파일을 import 하지 않은 소비자에게는 아무 일도 일어나지
 *      않는다 — `tokens.ts` 의 `:host` 기본값이 그대로 산다. 그 패키지가 스스로
 *      *"usable standalone without @iyulab/components installed"* 라고 선언한 설계를
 *      깨지 않는 유일한 형태가 이것이다.
 *   ⑵ **모든 선언이 `var(<하우스 토큰>, <standalone 기본값>)` 이다.** 하우스 시트가
 *      로드되지 않은 채 이 파일만 실린 경우에도 **폴백이 종전 값을 그대로** 낸다.
 *      ⚠폴백을 생략하면 토큰이 «보장된 무효» 가 되어 `:host` 기본값으로 돌아가지
 *      **않는다**(바깥 트리 선언이 이미 이겼기 때문이다) — 색이 사라진다.
 *   ⑶ 🔴**선택자는 «태그 목록» 이어야 한다. `:root` 는 진다.**
 *      커스텀 프로퍼티를 `:root` 에 두면 위젯에는 **상속값**으로 도달하는데,
 *      상속값은 그 요소 자신에 붙은 선언(`:host { … }`)을 이길 수 없다.
 *      실측(chromium): `:root` 로 덮으면 `#1a1a2e`(기본값 그대로), 태그로 덮으면 바뀐다.
 *   ⑷ 🔴**`:where()` 로 특이도를 0 으로 두는데, 그래도 `:host` 를 이긴다.**
 *      섀도 DOM 캐스케이드는 «바깥 트리의 일반 선언이 안쪽을 이긴다» 를 **특이도보다
 *      먼저** 판정하기 때문이다. ⇒ 이 파일은 `:host` 기본값은 이기고 소비자의
 *      `u-widget { … }` 브랜드 규칙에는 **진다.** 그것이 정확히 원하는 층이다.
 *
 *        tokens.ts 의 :host  →  이 파일  →  소비자 브랜드
 *
 * ──────────────────────────────────────────────────────────────────────────
 * 잇는 것 / 잇지 않는 것
 * ──────────────────────────────────────────────────────────────────────────
 *   잇는다     색 역할 · 면 · 테두리 · 타이포 패밀리 · 반경 · 엘리베이션 · 모션 지속시간
 *   잇는다     **차트 팔레트** 여덟 칸 — `@iyulab/components` 가 `--u-chart-color-1..8` 을 연 뒤부터.
 *              여덟 색의 «순서와 구분성» 은 그 자체가 설계라, 역할색으로 흉내 내지 않고
 *              **한 벌로 검증된** 하우스 축을 칸 대 칸으로 잇는다. 그 축이 없는 판(components
 *              1.46 이하)에서는 폴백이 종전 위젯 팔레트를 그대로 낸다.
 *   안 잇는다  **글자 «크기»**(`--u-widget-font-size*`) — 하우스의 타이포 축은 단마다
 *              size·weight·leading·tracking 넷을 갖는 4단 스케일인데 위젯 쪽은 size
 *              하나뿐이라, 단을 짝지으려면 «어느 단인가» 를 우리가 정해야 한다.
 *              패밀리는 그런 선택이 없어 여기 있다.
 * ==========================================================================
 */

:where(u-widget, uw-chart, uw-citation, uw-code, uw-compose, uw-content, uw-form,
       uw-gallery, uw-gauge, uw-kv, uw-math, uw-metric, uw-rating, uw-status,
       uw-steps, uw-table, uw-video) {

  /* ── 색 역할 ── */
  --u-widget-bg:             var(--u-bg-color,          #fff);
  --u-widget-surface:        var(--u-bg-color-raised,   #f1f5f9);
  --u-widget-text:           var(--u-txt-color,         #1a1a2e);
  --u-widget-text-secondary: var(--u-txt-color-weak,    #5b6777);
  --u-widget-border:         var(--u-border-color,      #e2e8f0);
  --u-widget-primary:        var(--u-primary-color,     #4f46e5);
  --u-widget-positive:       var(--u-success-color,     #15803d);
  --u-widget-negative:       var(--u-danger-color,      #dc2626);
  --u-widget-warning:        var(--u-warning-color,     #d97706);

  /* ── 차트 팔레트 — 칸 대 칸, 순서 그대로 ── */
  --u-widget-chart-color-1:  var(--u-chart-color-1, #4f46e5);
  --u-widget-chart-color-2:  var(--u-chart-color-2, #0ea5e9);
  --u-widget-chart-color-3:  var(--u-chart-color-3, #10b981);
  --u-widget-chart-color-4:  var(--u-chart-color-4, #f59e0b);
  --u-widget-chart-color-5:  var(--u-chart-color-5, #ef4444);
  --u-widget-chart-color-6:  var(--u-chart-color-6, #8b5cf6);
  --u-widget-chart-color-7:  var(--u-chart-color-7, #ec4899);
  --u-widget-chart-color-8:  var(--u-chart-color-8, #06b6d4);

  /* ★on-color 는 «칠해진 면 위의 글자» 다 — 하우스도 같은 개념을 갖는다.
     positive·negative 는 하우스에서 각각 success·danger 계열이다. */
  --u-widget-on-primary:     var(--u-primary-txt-color, #ffffff);
  --u-widget-on-positive:    var(--u-success-txt-color, #ffffff);
  --u-widget-on-negative:    var(--u-danger-txt-color,  #ffffff);

  /* ── 타이포(패밀리만 — 본문 · 고정폭) ── */
  --u-widget-font-family:    var(--u-font-base, system-ui, -apple-system, sans-serif);
  --u-widget-font-mono:      var(--u-font-mono, ui-monospace, 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', Consolas, monospace);

  /* ── 형태 ── */
  --u-widget-radius:         var(--u-radius-md, 6px);

  /* ── 엘리베이션 ── */
  --u-widget-shadow:         var(--u-shadow-sm, 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06));

  /* ── 모션 — 하우스의 지속시간 축(동작 줄이기면 하우스 시트가 0 으로 누른다) ── */
  --u-widget-duration-fast:   var(--u-duration-fast,   150ms);
  --u-widget-duration-normal: var(--u-duration-normal, 200ms);
  --u-widget-duration-slow:   var(--u-duration-slow,   300ms);
}

/*
 * ⚠**동작 줄이기는 여기서도 다시 쓴다** — 위 선언은 바깥 트리라 위젯 자신의 `:host` 동작 줄이기
 * 규칙을 이긴다. 하우스 시트 없이 이 파일만 실리면 폴백(150ms…)이 남아 움직임이 멈추지 않는다.
 */
@media (prefers-reduced-motion: reduce) {
  :where(u-widget, uw-chart, uw-citation, uw-code, uw-compose, uw-content, uw-form,
         uw-gallery, uw-gauge, uw-kv, uw-math, uw-metric, uw-rating, uw-status,
         uw-steps, uw-table, uw-video) {
    --u-widget-duration-fast:   0ms;
    --u-widget-duration-normal: 0ms;
    --u-widget-duration-slow:   0ms;
  }
}

/*
 * ⚠**다크는 여기서 따로 쓰지 않는다 — 그것이 브리지의 요점이다.**
 * 하우스 시트가 `:root[theme='dark']` 에서 같은 `--u-*` 를 다시 선언하므로, 참조만 하는
 * 이 파일은 **자동으로 따라간다.** 위젯 자신의 `@media (prefers-color-scheme: dark)`
 * 블록도 `:host` 선언이라 위 규칙에 진다 ⇒ 프리셋을 로드한 순간 **테마의 정본은
 * 하우스 하나**가 된다(로드하지 않으면 종전대로 위젯이 스스로 판단한다).
 */