@import url('./base.css');

/* Buttons */
.btn {
  --btn-bg: color-mix(in oklab, var(--surface), var(--text) 2%);
  --btn-fg: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; user-select: none;
  padding: 10px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .04s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { background: color-mix(in oklab, var(--btn-bg), var(--text) 3%); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

.btn--primary { --btn-bg: linear-gradient(180deg, var(--primary), var(--primary-600)); --btn-fg: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(76,143,255,.35); }
.btn--secondary { --btn-bg: color-mix(in oklab, var(--surface), var(--text) 8%); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--sm { padding: 6px 10px; font-size: var(--fs-1); }
.btn--lg { padding: 14px 20px; font-size: var(--fs-3); }

/* Inputs */
.input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--surface), var(--text) 2%);
  border: 1px solid var(--border);
  color: var(--text);
}
.input::placeholder { color: color-mix(in oklab, var(--muted), transparent 10%); }
.input:focus { outline: 2px solid color-mix(in oklab, var(--primary), white 10%); outline-offset: 1px; }

/* Cards */
.card { padding: var(--space-5); }
.card + .card { margin-top: var(--space-4); }
.card .card-title { font-size: var(--fs-4); margin: 0 0 var(--space-3); }
.card .card-subtle { color: var(--muted); font-size: var(--fs-1); }

/* Navbar */
.navbar {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { font-weight: 700; letter-spacing: .3px; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-0); border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.badge--success { color: #0d9e66; background: color-mix(in oklab, var(--success), transparent 85%); border-color: color-mix(in oklab, var(--success), transparent 70%); }
.badge--warn { color: #8f5c00; background: color-mix(in oklab, var(--warning), transparent 88%); border-color: color-mix(in oklab, var(--warning), transparent 70%); }
.badge--danger { color: #a32222; background: color-mix(in oklab, var(--danger), transparent 88%); border-color: color-mix(in oklab, var(--danger), transparent 70%); }

/* Skeletons */
.skeleton { background: linear-gradient(90deg, color-mix(in oklab, var(--surface-2), var(--text) 4%), color-mix(in oklab, var(--surface-2), var(--text) 2%), color-mix(in oklab, var(--surface-2), var(--text) 4%)); background-size: 200% 100%; animation: shine 1.2s linear infinite; border-radius: 8px; }
@keyframes shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Toast (minimal) */
.toast { position: fixed; right: 16px; bottom: 16px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); }