/* ============================================================
   RVSL Live Studio — Design Tokens & Shared Primitives
   Filosofi: Simple, Fast, Clear, Functional, Mobile-first.
   Target: pemilik UMKM (bukan developer). Sentuhan besar, teks jelas.
   Dipakai bersama oleh live.css & studio.css.
   ============================================================ */

:root {
  /* Brand */
  --accent: #ff2e63;
  --accent-ink: #ffffff;
  --accent-soft: #ffe3ec;

  /* Light surface (Studio / owner-facing) */
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #f0f1f7;
  --ink: #14151c;
  --ink-2: #4a4d5e;
  --muted: #8a8ea3;
  --line: #e5e7f0;

  /* Dark surface (Live stage) */
  --d-bg: #0b0b12;
  --d-surface: #15151f;
  --d-surface-2: #1d1d2b;
  --d-ink: #f5f5fa;
  --d-muted: #9a9ab0;
  --d-line: #2a2a3c;

  /* Status */
  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --warn: #d97706;
  --danger: #e11d48;

  /* Shape & motion */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20, 21, 28, .06), 0 1px 3px rgba(20, 21, 28, .08);
  --shadow: 0 8px 24px rgba(20, 21, 28, .10);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .45);
  --tap: 48px; /* target sentuh minimum */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Type */
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(20px, 5vw, 26px);
  --fs-h2: clamp(16px, 4vw, 19px);
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
img, video { max-width: 100%; display: block; }

/* ---------- Shared: Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-body);
  text-decoration: none; transition: transform .12s var(--ease), filter .12s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:hover { filter: brightness(1.05); }
.btn--block { width: 100%; }
.btn--lg { min-height: 56px; font-size: 17px; border-radius: var(--r); }
.btn--ghost { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ok { background: var(--ok); }
.btn--quiet { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); min-height: 40px; padding: 0 14px; font-size: var(--fs-sm); }
.btn--danger-quiet { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px #f3c6cf; min-height: 40px; padding: 0 14px; font-size: var(--fs-sm); }

/* ---------- Shared: Pill / badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface-2); color: var(--ink-2);
}
.badge--ok { background: var(--ok-soft); color: var(--ok); }
.badge--accent { background: var(--accent-soft); color: var(--accent); }

/* ---------- Shared: Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #fff; font-weight: 700; font-size: var(--fs-sm);
  padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 60;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}