/* ============================================================
   TASHABAR CHIPS — production stylesheet
   ------------------------------------------------------------
   Usage:
     <span class="chip chip--live"><span class="dot dot-ping"></span>Live</span>

   Build any chip from three layers:
     1. a state class   (chip--live, chip--open, chip--saas, ...)
     2. a dot add-on    (dot-blink, dot-ping — or plain .dot)
     3. an extra        (chip--sm, chip--lg, chip--mini, chip--pop)

   Every chip recolors from one variable: set --c inline or in
   a new class to invent a state in one line.
   ============================================================ */

:root{
  --tb-terracotta:#D55F2C;
  --tb-terracotta-deep:#B84E20;
  --tb-cream:#F4F1E8;
  --tb-ink:#1C1B18;

  --tb-slate:#5C6B8A;
  --tb-violet:#7A5CB8;
  --tb-amber:#D9A23B;
  --tb-teal:#2E8C8C;
  --tb-sky:#4A87C7;
  --tb-rose:#C75D7A;
  --tb-green:#3F8E5A;
  --tb-green-deep:#33744A;
  --tb-gold:#C9971C;
  --tb-gold-bright:#F0C75E;
  --tb-gold-deep:#9C7414;
  --tb-clay:#9A6B4F;
  --tb-red:#B8473D;
  --tb-stone:#8A857B;
  --tb-plum:#8E4A78;
  --tb-moss:#6E8B3D;
  --tb-navy:#3D5470;
}

/* ---------------- base chip: miniature TASHABAR sign ---------------- */
.chip{
  --c:var(--tb-terracotta);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px 7px 11px;
  border-radius:11px;
  border:2.5px solid var(--c);
  background:var(--tb-cream);
  box-shadow:inset 0 0 0 2px #fff;
  font-family:'Roboto Slab',Rockwell,Georgia,serif;
  font-size:12.5px;
  font-weight:bold;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tb-ink);
  white-space:nowrap;
  vertical-align:middle;
  position:relative;
  line-height:1;
}
.chip .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--c);flex:none;position:relative;
}

/* ---------------- dot behaviors ---------------- */
.dot-blink{animation:tb-blink 1.8s ease-in-out infinite}
@keyframes tb-blink{0%,100%{opacity:1}50%{opacity:.3}}

.dot-ping::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--c);
  animation:tb-ping 2.2s ease-out infinite;
}
@keyframes tb-ping{
  0%{transform:scale(.6);opacity:.9}
  70%,100%{transform:scale(2.3);opacity:0}
}

/* ============================================================
   STATUS — lifecycle
   ============================================================ */
.chip--concept  {--c:var(--tb-slate); color:rgba(28,27,24,.62)}
.chip--dev      {--c:var(--tb-violet)}
.chip--building {--c:var(--tb-amber)}
.chip--beta     {--c:var(--tb-teal)}
.chip--testing  {--c:var(--tb-sky)}
.chip--soon     {--c:var(--tb-rose)}

/* ============================================================
   STATUS — launch
   ============================================================ */
/* LIVE: solid green sign */
.chip--live{
  --c:var(--tb-green);
  background:var(--tb-green);
  border-color:var(--tb-green-deep);
  box-shadow:inset 0 0 0 2px rgba(244,241,232,.55);
  color:var(--tb-cream);
}
.chip--live .dot{background:var(--tb-cream)}
.chip--live .dot::after{border-color:var(--tb-cream)}

/* OPEN FOR BUSINESS: the gold showpiece */
.chip--open{
  --c:var(--tb-gold);
  background:linear-gradient(135deg,#E9B83C 0%,var(--tb-gold-bright) 28%,#C9971C 55%,#E3B445 80%,var(--tb-gold-deep) 100%);
  border-color:var(--tb-gold-deep);
  box-shadow:
    inset 0 0 0 2px rgba(255,248,225,.65),
    0 2px 10px rgba(201,151,28,.35);
  color:#4A3608;
  text-shadow:0 1px 0 rgba(255,248,225,.5);
  overflow:hidden;
}
.chip--open .dot{background:#FFF6DC;box-shadow:0 0 6px rgba(255,246,220,.9)}
.chip--open .dot::after{border-color:#FFF6DC}
.chip--open::after{
  content:"";position:absolute;top:-25%;left:-45%;
  width:34%;height:150%;
  background:linear-gradient(90deg,transparent,rgba(255,252,240,.75),transparent);
  transform:skewX(-18deg);
  animation:tb-gleam 3.8s ease-in-out infinite;
}
@keyframes tb-gleam{0%{left:-45%}20%{left:118%}100%{left:118%}}
.chip--open .spark{
  position:absolute;top:1px;right:5px;font-size:9px;color:#FFF6DC;
  animation:tb-twinkle 2.6s ease-in-out infinite;pointer-events:none;
}
@keyframes tb-twinkle{
  0%,100%{opacity:0;transform:scale(.5) rotate(0)}
  50%{opacity:1;transform:scale(1.15) rotate(40deg)}
}

/* FEATURED: terracotta house style */
.chip--featured{
  --c:var(--tb-terracotta);
  background:var(--tb-terracotta);
  border-color:var(--tb-terracotta-deep);
  box-shadow:inset 0 0 0 2px rgba(244,241,232,.55);
  color:var(--tb-cream);
}
.chip--featured .dot{background:var(--tb-cream)}
.chip--featured .dot::after{border-color:var(--tb-cream)}

/* ============================================================
   STATUS — housekeeping
   ============================================================ */
.chip--maint    {--c:var(--tb-clay)}
.chip--paused   {--c:var(--tb-red)}
.chip--archived {--c:var(--tb-stone); color:rgba(28,27,24,.5)}
.chip--archived .dot{opacity:.5}

/* ============================================================
   CATEGORY — project types (quieter: thin frame, no dot needed)
   ============================================================ */
.chip--cat{
  border-width:1.5px;
  box-shadow:none;
  background:#fff;
  font-weight:normal;
  letter-spacing:.12em;
  padding:7px 13px;
  color:var(--c);
}
.chip--ecommerce {--c:var(--tb-terracotta)}
.chip--saas      {--c:var(--tb-navy)}
.chip--website   {--c:var(--tb-teal)}
.chip--mobile    {--c:var(--tb-violet)}
.chip--branding  {--c:var(--tb-plum)}
.chip--content   {--c:var(--tb-moss)}
.chip--tool      {--c:var(--tb-slate)}

/* ============================================================
   ACCENT — little flags
   ============================================================ */
.chip--new{
  --c:var(--tb-green);
  background:var(--tb-green);border-color:var(--tb-green-deep);
  color:var(--tb-cream);box-shadow:inset 0 0 0 2px rgba(244,241,232,.45);
  padding:6px 12px;font-size:11px;
}
.chip--hot{
  --c:var(--tb-red);
  background:var(--tb-red);border-color:#94352D;
  color:var(--tb-cream);box-shadow:inset 0 0 0 2px rgba(244,241,232,.45);
  padding:6px 12px;font-size:11px;
}
.chip--pick{
  --c:var(--tb-plum);
  background:var(--tb-plum);border-color:#703A5F;
  color:var(--tb-cream);box-shadow:inset 0 0 0 2px rgba(244,241,232,.45);
  padding:6px 12px;font-size:11px;
}
.chip--updated{
  --c:var(--tb-sky);
  padding:6px 12px;font-size:11px;
}

/* ============================================================
   SIZES & EXTRAS
   ============================================================ */
.chip--sm{padding:5px 11px 5px 9px;font-size:11px;border-width:2px;gap:6px}
.chip--sm .dot{width:7px;height:7px}

.chip--lg{padding:10px 19px 10px 15px;font-size:14.5px;border-radius:13px;gap:10px}
.chip--lg .dot{width:11px;height:11px}

.chip--mini{padding:0;width:30px;height:30px;justify-content:center;gap:0;border-radius:9px}
.chip--mini.chip--sm{width:24px;height:24px;border-radius:8px}

/* one-time celebration pop — add via JS when a project launches */
.chip--pop{animation:tb-pop .65s cubic-bezier(.22,1.5,.36,1)}
@keyframes tb-pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* links styled as chips */
a.chip{text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
a.chip:hover{transform:translateY(-1px)}
a.chip:focus-visible{outline:2px solid var(--c);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .dot-blink,.dot-ping::after,
  .chip--open::after,.chip--open .spark,
  .chip--pop{animation:none}
}