/*
 * Tag registry — 12 preset tag dùng cho cả homepage grid, filter bar, và hero content page.
 *
 * Cách thêm tag mới:
 *   1. Append 1 rule `.tag-<id>` bên dưới (định nghĩa 3 CSS var từ bảng màu)
 *   2. Thêm entry tương ứng vào `tagRegistry` trong site/index.html <script>
 *   3. Thêm id vào PRESET_TAGS trong tools/build_prompt.py
 *   4. Update bảng trong CLAUDE.md + tools/prompts/system.md
 *
 * Bảng màu chuẩn (Claude.ai palette — coral đã đổi sang Terra Cotta):
 *   coral  = #d97757  → rgba(217,119,87, α)   Terra Cotta
 *   amber  = #F5A623  → rgba(245,166,35, α)
 *   teal   = #4EC9C0  → rgba(78,201,192, α)
 *   purple = #A374E8  → rgba(163,116,232,α)
 *   green  = #5DC97A  → rgba(93,201,122, α)
 *
 * Alpha tone-down để hợp Vellum: bg .10 / border .25 / hover bg .14 / active bg .18.
 */

/* ── base style cho mọi chip có class dạng tag-* ───────────────── */
.tag[class*="tag-"]{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  background: var(--tag-bg);
  color:      var(--tag-fg);
  border:     1px solid var(--tag-bd);
  white-space: nowrap;
}

/* ── chip trong hero content page (click được → về homepage đã lọc) */
a.tag-clickable{
  text-decoration: none;
  transition: transform .15s, filter .15s;
}
a.tag-clickable:hover{
  transform: translateY(-1px);
  filter: brightness(1.15);
}

/* ── chip filter ở homepage: secondary button phong cách Claude.ai ──
 * inactive : transparent fill, border tag-color alpha .25, text tag-color
 * hover    : border alpha .50 + lift nhẹ, không glow
 * active   : Dark Filled — bg ink/text, hoặc filled tag-color nhẹ với ring
 * 9.6px border-radius (đè .filter-btn 999px ở homepage cho secondary look).
 */
.filter-btn[class*="tag-"] {
  border-radius: 9.6px;
  transition: transform .15s cubic-bezier(.2,.8,.2,1),
              background-color .2s, border-color .2s,
              color .15s, opacity .18s;
}
.filter-btn[class*="tag-"]:not(.active){
  background: transparent;
  border-color: rgba(var(--tag-rgb), .25);
  color: var(--tag-fg);
  opacity: .85;
}
.filter-btn[class*="tag-"]:not(.active):hover{
  opacity: 1;
  transform: translateY(-1px);
  background: rgba(var(--tag-rgb), .08);
  border-color: rgba(var(--tag-rgb), .50);
}
.filter-btn[class*="tag-"]:not(.active):active{
  transform: translateY(0) scale(.97);
}
.filter-btn[class*="tag-"].active{
  background: rgba(var(--tag-rgb), .14);
  border-color: rgba(var(--tag-rgb), .60);
  color: var(--tag-fg);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   REGISTRY (12 preset tag)
   ═══════════════════════════════════════════════════════════════════ */

/* --tag-rgb (triplet) cho compose alpha động ở filter-btn rule trên.
   coral đã đổi #E07254 → #d97757 (Terra Cotta) cho 3 tag dùng coral.
   Alpha tone-down để hợp Vellum: bg .10 / border .25. */
.tag-ai         { --tag-bg: rgba(217,119,87,.10);  --tag-fg: #d97757; --tag-bd: rgba(217,119,87,.25); --tag-rgb: 217,119,87;  }
.tag-english    { --tag-bg: rgba(93,201,122,.10);  --tag-fg: #5DC97A; --tag-bd: rgba(93,201,122,.25); --tag-rgb: 93,201,122;  }
.tag-business   { --tag-bg: rgba(245,166,35,.10);  --tag-fg: #F5A623; --tag-bd: rgba(245,166,35,.25); --tag-rgb: 245,166,35;  }
.tag-literature { --tag-bg: rgba(163,116,232,.10); --tag-fg: #A374E8; --tag-bd: rgba(163,116,232,.25); --tag-rgb: 163,116,232; }
.tag-finance    { --tag-bg: rgba(78,201,192,.10);  --tag-fg: #4EC9C0; --tag-bd: rgba(78,201,192,.25); --tag-rgb: 78,201,192;  }
.tag-mindset    { --tag-bg: rgba(217,119,87,.10);  --tag-fg: #d97757; --tag-bd: rgba(217,119,87,.25); --tag-rgb: 217,119,87;  }
.tag-law        { --tag-bg: rgba(93,201,122,.10);  --tag-fg: #5DC97A; --tag-bd: rgba(93,201,122,.25); --tag-rgb: 93,201,122;  }
.tag-management { --tag-bg: rgba(245,166,35,.10);  --tag-fg: #F5A623; --tag-bd: rgba(245,166,35,.25); --tag-rgb: 245,166,35;  }
.tag-ecom       { --tag-bg: rgba(163,116,232,.10); --tag-fg: #A374E8; --tag-bd: rgba(163,116,232,.25); --tag-rgb: 163,116,232; }
.tag-philosophy { --tag-bg: rgba(78,201,192,.10);  --tag-fg: #4EC9C0; --tag-bd: rgba(78,201,192,.25); --tag-rgb: 78,201,192;  }
.tag-podcast    { --tag-bg: rgba(217,119,87,.10);  --tag-fg: #d97757; --tag-bd: rgba(217,119,87,.25); --tag-rgb: 217,119,87;  }
.tag-economics  { --tag-bg: rgba(93,201,122,.10);  --tag-fg: #5DC97A; --tag-bd: rgba(93,201,122,.25); --tag-rgb: 93,201,122;  }
.tag-helium10   { --tag-bg: rgba(252,254,248,.10); --tag-fg: #fcfef8; --tag-bd: rgba(252,254,248,.25); --tag-rgb: 252,254,248; }