/* =============================================================
   GuDoC Design Tokens v2.1 — Addendum
   ─────────────────────────────────────────────────────────────
   Stage 4a/4b/4c에서 새로 발견된 토큰 모음.
   tokens.css 뒤에 추가로 로드하거나 병합하세요.
   ============================================================= */

:root {
  /* ── Highlight (검색 결과·강조 텍스트) ── */
  --gudoc-highlight-bg: color-mix(in srgb, var(--gudoc-coral-500) 28%, transparent);

  /* ── Tag size scale ── */
  --gudoc-tag-xs: 0.75rem;   /* 12 */
  --gudoc-tag-sm: 0.8125rem; /* 13 */
  --gudoc-tag-md: 0.875rem;  /* 14 */
  --gudoc-tag-lg: 1rem;      /* 16 */

  /* ── Schedule calendar cell ── */
  --gudoc-cell-size-desktop: 44px;
  --gudoc-cell-size-mobile:  32px;

  /* ── Coupon cutout radius (양옆 반원) ── */
  --gudoc-coupon-cutout: 12px;

  /* ── Numeric tabular ── */
  --gudoc-font-feature-num: 'tnum' on, 'cv11' on;

  /* ── New shadows for floating cards ── */
  --shadow-2xs: 0 1px 1px rgba(20,20,19,0.03);

  /* ── Card cover gradient stops (셀러 상점 cover, 카테고리 hero 등 공통) ── */
  --gudoc-cover-coral: linear-gradient(135deg, var(--gudoc-coral-300), var(--gudoc-coral-500));
  --gudoc-cover-blue:  linear-gradient(135deg, #B5C7FF, #2563EB);
  --gudoc-cover-green: linear-gradient(135deg, #A8E6CF, #1F8E5C);
  --gudoc-cover-amber: linear-gradient(135deg, #FFD580, #E8A317);
  --gudoc-cover-violet: linear-gradient(135deg, #D6B3FF, #7C3AED);
  --gudoc-cover-warm:  linear-gradient(135deg, #FFDCD0, #FF8B66);
}

/* -------------------------------------------------------------
   v2.1 — Semantic 토큰 보강
   ------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Highlight surface for hover/selection */
  --color-highlight-bg: var(--gudoc-highlight-bg);
  --color-highlight-text: var(--gudoc-coral-700);

  /* "applied"(적용형) chip 색 — 선택형과 구분 */
  --color-pill-applied-bg: var(--color-brand-subtle);
  --color-pill-applied-border: var(--color-brand);
  --color-pill-applied-text: var(--color-brand-text);

  /* "active"(클릭형) chip 색 — strong inverted */
  --color-chip-active-bg: var(--gudoc-gray-900);
  --color-chip-active-text: var(--gudoc-gray-0);

  /* Schedule cell colors */
  --color-cell-bg: var(--color-surface);
  --color-cell-border: var(--color-border);
  --color-cell-start-bg: var(--color-brand);
  --color-cell-start-text: var(--color-text-on-brand);
  --color-cell-bill-border: var(--gudoc-cycle-monthly);
  --color-cell-bill-text: var(--gudoc-cycle-monthly);
}

[data-theme="dark"] {
  --color-highlight-bg: color-mix(in srgb, var(--gudoc-coral-400) 32%, transparent);
  --color-highlight-text: var(--gudoc-coral-200);

  --color-chip-active-bg: var(--gudoc-gray-0);
  --color-chip-active-text: var(--gudoc-gray-950);

  --color-cell-bg: var(--color-surface);
  --color-cell-border: var(--color-border);
}

[data-theme="modern"] {
  --color-chip-active-bg: var(--color-brand);
  --color-chip-active-text: var(--color-text-on-brand);
}

/* -------------------------------------------------------------
   v2.1 — Utility 클래스
   ------------------------------------------------------------- */
.gudoc-num {
  font-variant-numeric: tabular-nums;
}
.gudoc-hl {
  background: var(--color-highlight-bg);
  color: var(--color-highlight-text);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}
.gudoc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}