/* ui.css — Reusable UI components */

* { box-sizing: border-box }
html, body { margin:0; padding:0; color: var(--ink-900); background: var(--bg); font: 400 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-16) 0; }
.h1 { font-size: var(--fs-7); line-height: 1.1; margin: 0 0 var(--space-6); }
.h2 { font-size: var(--fs-6); line-height: 1.15; margin: 0 0 var(--space-5); }
.h3 { font-size: var(--fs-5); margin: 0 0 var(--space-3); }
.lead { font-size: var(--fs-3); color: var(--muted); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  padding: 10px 16px; border-radius: 999px; font-weight:600; font-size: var(--fs-2);
  text-decoration:none; border:1px solid transparent; box-shadow: var(--shadow-soft);
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { filter: brightness(.96); }
.btn-ghost { background: var(--white); color: var(--ink-900); border-color: #E5E7EB; }
.btn-ghost:hover { background:#F9FAFB; }
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }

/* Pills & Badges */
.pill { display:inline-block; padding:6px 10px; border-radius:999px; font-size:var(--fs-1); background: var(--purple-100); color: var(--purple); }
.theme-wallet .pill { background: #FFF5DB; color: #7A5A00; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:var(--fs-0); background:#EEFDF7; color:#067647; }

/* Cards */
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-6); }
.card-grid { display:grid; gap: var(--space-6); }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* Hero */
.hero { padding: var(--space-16) 0; position: relative; overflow:hidden; }
.hero .actions { display:flex; gap: var(--space-4); flex-wrap:wrap; }
.hero::before {
  content:""; position:absolute; inset:-20% -10% auto -10%; height:60%;
  background: radial-gradient(60% 60% at 20% 30%, var(--accent) 0%, transparent 60%),
              radial-gradient(40% 40% at 80% 10%, rgba(56,226,181,.6) 0%, transparent 60%);
  opacity:.15; filter: blur(50px); pointer-events:none;
}

/* Header */
.site-header { position: sticky; top:0; backdrop-filter: blur(8px); background: rgba(255,255,255,.7); border-bottom: 1px solid rgba(2,6,23,.06); z-index:100; }
.navbar { display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.brand { font-weight:800; color: var(--ink-900); text-decoration:none; display:flex; align-items:center; gap:10px; }
.brand .dot { width:10px; height:10px; border-radius:999px; background: var(--green); box-shadow: 0 0 0 4px rgba(56,226,181,.25); }

.nav { display:none; }
.nav ul { list-style:none; margin:0; padding:0; display:flex; gap:20px; }
.nav a { color: var(--ink-700); text-decoration:none; font-weight:600; }
.nav a.active { color: var(--ink-900); text-decoration: underline; }
.nav-toggle { background:none; border:0; font-size:24px; line-height:1; }

@media (min-width: 960px){
  .nav { display:block; }
  .nav-toggle { display:none; }
}

/* Footer */
.site-footer { border-top: 1px solid rgba(2,6,23,.06); background: var(--white); }
.footer-inner { display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; align-items:center; padding: var(--space-6) 0; }

/* WETAS ID */
.wetas-id { background: linear-gradient(135deg, var(--green), var(--green-700)); color: var(--white); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow); }

/* Simple product grid */
.products { display:grid; gap: var(--space-6); }
@media (min-width: 768px){ .products { grid-template-columns: repeat(4, 1fr); } }
.product-card img { width:100%; height:200px; object-fit:cover; border-radius: var(--radius); margin-bottom: var(--space-3); }
.product-price { font-weight:700; }

/* Utility */
.max-w { max-width: 800px; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.pb-0 { padding-bottom: 0; }