/* ═══════════════════════════════════════════════════════════════════════════
   JT × Tailwind CSS v4 브리지  v1.0
   jt-tokens.css를 Tailwind 테마로 연결합니다.

   목적: Tailwind 클래스(bg-brand, text-action …)를 쓰면 자동으로 JT 토큰 값이
        나오게 합니다. 값의 정본은 여전히 jt-tokens.css 하나입니다.

   사용법 — 앱의 전역 CSS 파일 맨 위(순서 중요):
     @import "tailwindcss";
     @import "./jt-tokens.css";
     @import "./jt-tailwind-v4.css";
     @import "./jt-utilities.css";        (선택 — 컴포넌트 클래스도 쓸 때)
     @source "./src";                     (v4는 여기서 스캔 대상을 지정합니다)

   ⚠️ 이름을 왜 바꿨나 — Tailwind v4는 `--color-*`·`--font-*`·`--shadow-*`를
      자기 네임스페이스로 씁니다. JT 토큰도 같은 이름을 쓰기 때문에
      `--color-accent: var(--color-accent)` 같은 **자기 참조**가 생겨 값이 깨집니다.
      그래서 Tailwind가 보는 이름은 아래처럼 다르게 두고, 값만 JT 토큰을 가리킵니다.

   ⚠️ `@theme inline`인 이유 — inline이 없으면 변수 해석 시점 문제로
      다크·밀도 전환이 유틸리티에 따라오지 않습니다.
   ═══════════════════════════════════════════════════════════════════════════ */

@theme inline {
  /* ── 색 ────────────────────────────────────────────────────────────────
     왼쪽(Tailwind가 보는 이름) → 오른쪽(JT 토큰, 값의 정본)             */

  /* 브랜드·상호작용 — 2톤 규칙: 주 버튼은 brand(Charcoal), 링크는 action(Blue) */
  --color-brand:        var(--color-primary);          /* bg-brand */
  --color-brand-hover:  var(--color-primary-hover);    /* hover:bg-brand-hover */
  --color-on-brand:     var(--color-on-primary);       /* text-on-brand */
  --color-action:       var(--color-accent);           /* text-action = 링크·강조 */
  --color-action-soft:  var(--color-accent-bg);        /* bg-action-soft */

  /* 글자 */
  --color-ink:    var(--color-text);                   /* text-ink */
  --color-ink-2:  var(--color-text-secondary);         /* text-ink-2 */
  --color-ink-3:  var(--color-text-tertiary);          /* text-ink-3 */
  --color-ink-off:var(--color-text-disabled);          /* text-ink-off */

  /* 표면 */
  --color-canvas:   var(--color-bg-layout);            /* bg-canvas = 페이지 배경 */
  --color-surface:  var(--color-bg-container);         /* bg-surface = 카드 */
  --color-surface-2:var(--color-bg-elevated);          /* bg-surface-2 = 팝오버 */

  /* 선·구분 */
  --color-line:        var(--color-border);            /* border-line */
  --color-line-strong: var(--color-border-strong);
  --color-divider:     var(--color-split);             /* border-divider */

  /* 상호작용 상태 */
  --color-hover:    var(--color-fill-hover);           /* hover:bg-hover */
  --color-selected: var(--color-fill-selected);        /* bg-selected */

  /* 상태 — JT 토큰명과 겹치지 않게 이름을 달리했습니다 */
  --color-ok:      var(--color-success);               /* text-ok */
  --color-caution: var(--color-warning);               /* text-caution */
  --color-danger:  var(--color-error);                 /* text-danger */
  --color-notice:  var(--color-info);                  /* text-notice */

  /* 품질 판정 — 화장품 제조 도메인 (⚠️ 색만으로 판정 전달 금지, 글자 병기) */
  --color-qc-pass: var(--color-pass);                  /* text-qc-pass */
  --color-qc-fail: var(--color-fail);
  --color-qc-hold: var(--color-hold);
  --color-qc-oos:  var(--color-oos);

  /* ── 글꼴 ── */
  --font-sans:    var(--font-base);                    /* font-sans = Pretendard */
  --font-numeric: var(--font-num);                     /* font-numeric = Figtree(숫자) */
  --font-brand:   var(--font-display);                 /* font-brand = Figtree(영문대형) */

  /* ── 글자 크기 — Productive 세트 ── */
  --text-xs:   var(--fs-xs);    --text-sm:  var(--fs-sm);
  --text-base: var(--fs-base);  --text-lg:  var(--fs-lg);
  --text-xl:   var(--fs-xl);    --text-2xl: var(--fs-2xl);
  --text-3xl:  var(--fs-3xl);   --text-4xl: var(--fs-4xl);
  /* Expressive 세트 — 랜딩·브랜드 페이지 */
  --text-hero-sm: var(--fs-display-sm);                /* text-hero-sm = 40px */
  --text-hero-md: var(--fs-display-md);                /* 48px */
  --text-hero-lg: var(--fs-display-lg);                /* 56px */

  /* ── 행간 ── */
  --leading-tight:  var(--lh-tight);   --leading-snug:    var(--lh-snug);
  --leading-normal: var(--lh-normal);  --leading-relaxed: var(--lh-relaxed);

  /* ── 라운드 ── */
  --radius-sm: var(--r-sm);  --radius-md: var(--r-md);  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);  --radius-full: var(--r-full);

  /* ── 그림자 — shadow-e1 ~ e4 (elevation) ── */
  --shadow-e1: var(--shadow-1);  --shadow-e2: var(--shadow-2);
  --shadow-e3: var(--shadow-3);  --shadow-e4: var(--shadow-4);

  /* ── 컨테이너 — max-w-doc / -app / -board ── */
  --container-doc:   var(--container-narrow);          /* 720 문서·읽기 */
  --container-app:   var(--container-max);             /* 1200 표준 앱 */
  --container-board: var(--container-wide);            /* 1440 대시보드 */
}

/* ── 간격·브레이크포인트 — inline 불필요(고정값) ──
   v4는 --spacing 하나로 p-1·p-2·p-4…를 배수 생성합니다. JT는 4px 그리드. */
@theme {
  --spacing: 4px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1440px;
}

/* ── 다크 모드 연결 ──────────────────────────────────────────────────────
   JT는 [data-theme="dark"]를 씁니다. 이 줄이 없으면 Tailwind의 dark: 변형이
   JT 다크 테마와 따로 놉니다(가장 흔한 사고). */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));