/* ===========================================================================
   Don Oliva — Design system components
   Recreated as plain CSS from the Don Oliva design system bundle:
   Button, Badge, Tabs, ProductCard.
   =========================================================================== */

/* ---------- Button ---------- */
.do-btn{
  --_bg: var(--brand-primary);
  --_fg: var(--text-on-brand);
  --_bg-hover: var(--brand-primary-hover);
  --_bg-active: var(--brand-primary-active);
  --_border: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:0.5em;
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  border:1.5px solid var(--_border); border-radius: var(--radius-pill);
  background: var(--_bg); color: var(--_fg);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.do-btn:hover{ background: var(--_bg-hover); text-decoration:none; }
.do-btn:active{ background: var(--_bg-active); transform: translateY(1px); }
.do-btn:focus-visible{ outline: var(--ring-width) solid var(--ring); outline-offset:2px; }
.do-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

.do-btn--sm{ font-size: var(--text-sm); padding: 0.4rem 0.9rem; }
.do-btn--md{ font-size: var(--text-base); padding: 0.6rem 1.25rem; }
.do-btn--lg{ font-size: var(--text-md); padding: 0.8rem 1.6rem; }
.do-btn--block{ display:flex; width:100%; }

.do-btn--secondary{
  --_bg: var(--surface-card); --_fg: var(--brand-primary);
  --_bg-hover: var(--green-50); --_bg-active: var(--green-100);
  --_border: var(--border-default);
}
.do-btn--secondary:hover{ border-color: var(--brand-primary); }
.do-btn--ghost{
  --_bg: transparent; --_fg: var(--brand-primary);
  --_bg-hover: var(--green-50); --_bg-active: var(--green-100);
}
.do-btn--accent{
  --_bg: var(--brand-accent); --_fg: var(--text-on-accent);
  --_bg-hover: var(--brand-accent-hover); --_bg-active: var(--gold-700);
}
.do-btn--danger{
  --_bg: var(--danger); --_fg:#fff;
  --_bg-hover: var(--terracotta-600); --_bg-active: var(--terracotta-600);
}
.do-btn__icon{ display:inline-flex; width:1.15em; height:1.15em; }
.do-btn__icon svg{ width:100%; height:100%; }

/* ---------- Badge ---------- */
.do-badge{
  display:inline-flex; align-items:center; gap:0.35em;
  font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: var(--text-xs); letter-spacing: 0.04em;
  padding: 0.28em 0.7em; border-radius: var(--radius-pill);
  line-height:1.2; white-space:nowrap;
}
.do-badge--solid{ background: var(--brand-primary); color: var(--text-on-brand); }
.do-badge--soft{ background: var(--surface-brand-soft); color: var(--green-800); }
.do-badge--accent{ background: var(--brand-accent); color: var(--text-on-accent); }
.do-badge--outline{ background: transparent; color: var(--green-800); border:1.5px solid var(--green-400); }
.do-badge--neutral{ background: var(--surface-sunken); color: var(--text-muted); }
.do-badge--success{ background: var(--success-soft); color: var(--green-800); }
.do-badge--warning{ background: var(--warning-soft); color: var(--gold-700); }
.do-badge--danger{ background: var(--danger-soft); color: var(--terracotta-600); }
.do-badge--info{ background: var(--info-soft); color: var(--teal-600); }
.do-badge__dot{ width:0.5em; height:0.5em; border-radius:50%; background:currentColor; }

/* ---------- Tabs ---------- */
.do-tabs{ display:flex; gap:0.25rem; font-family: var(--font-sans); border-bottom:1.5px solid var(--border-subtle); }
.do-tabs__tab{
  appearance:none; background:none; border:none; cursor:pointer;
  font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-muted);
  padding: 0.7rem 1rem; position:relative; transition: color var(--dur-fast) var(--ease-out);
}
.do-tabs__tab:hover{ color: var(--text-strong); }
.do-tabs__tab--active{ color: var(--brand-primary); }
.do-tabs__tab--active::after{
  content:''; position:absolute; left:0.7rem; right:0.7rem; bottom:-1.5px; height:3px;
  background: var(--brand-primary); border-radius: var(--radius-pill);
}
.do-tabs__tab:focus-visible{ outline: var(--ring-width) solid var(--ring); outline-offset:-2px; border-radius: var(--radius-xs); }
.do-tabs--pill{ border:none; gap:0.4rem; }
.do-tabs--pill .do-tabs__tab{ border-radius: var(--radius-pill); padding: 0.45rem 1rem; }
.do-tabs--pill .do-tabs__tab--active{ background: var(--green-600); color: var(--text-on-brand); }
.do-tabs--pill .do-tabs__tab--active::after{ display:none; }

/* ---------- ProductCard ---------- */
.do-product{
  display:flex; flex-direction:column; background: var(--surface-card);
  border:1px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow:hidden; font-family: var(--font-sans);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.do-product:hover{ box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--green-200); }
.do-product__media{ position:relative; aspect-ratio: 4 / 3; display:flex; align-items:center; justify-content:center; }
.do-product__media img{ width:100%; height:100%; object-fit:cover; }
.do-product__ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.do-product__ph svg, .do-product__ph img{ width:38%; height:38%; opacity:.5; }
.do-product__ph--green{ background: radial-gradient(120% 120% at 30% 20%, var(--green-100), var(--green-300)); }
.do-product__ph--gold{ background: radial-gradient(120% 120% at 30% 20%, var(--gold-100), var(--gold-300)); }
.do-product__ph--sand{ background: radial-gradient(120% 120% at 30% 20%, var(--sand-100), var(--sand-300)); }
.do-product__badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap; }
.do-product__body{ display:flex; flex-direction:column; gap:0.3rem; padding: var(--space-4); flex:1; }
.do-product__cat{ font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing:.08em; text-transform:uppercase; color: var(--brand-accent-hover); }
.do-product__name{ font-family: var(--font-display); font-size: var(--text-lg); font-weight:500; color: var(--text-strong); line-height:1.15; }
.do-product__unit{ font-size: var(--text-sm); color: var(--text-muted); }
.do-product__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top: var(--space-3); }
.do-product__price{ display:flex; flex-direction:column; }
.do-product__price b{ font-family: var(--font-mono); font-size: var(--text-lg); font-weight:600; color: var(--green-700); }
.do-product__price s{ font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-subtle); }