/* Design tokens — lihat Design.md §2. Nilai --color-primary/secondary/accent
   di-override runtime oleh applyTheme() di store.js begitu branding cabang resolve. */
:root {
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --color-accent: #22c55e;
  --color-on-primary: #ffffff;

  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #f59e0b;
  --color-info: #0ea5e9;

  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-2: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-subtle: #e2e8f0;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --shadow-float: 0 12px 32px -8px rgba(15, 23, 42, .25);

  --font-base: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  --thumb-zone-height: 96px;
}

[data-theme="dark"] {
  --bg-base: #0b1120;
  --bg-surface: #131c2e;
  --bg-surface-2: #1b2740;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-subtle: #263652;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
}

.font-mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Transisi halaman (Design.md §7) ---- */
.page-enter-active,
.page-leave-active {
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.page-enter-from {
  opacity: 0;
  transform: translateX(12px);
}
.page-leave-to {
  opacity: 0;
  transform: translateX(-12px);
}

/* ---- Fade generik (splash, toast, dialog) ---- */
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--dur-base) var(--ease-standard);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ---- Bottom sheet slide-up (mobile) ---- */
.sheet-enter-active,
.sheet-leave-active {
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.sheet-enter-from,
.sheet-leave-to {
  transform: translateY(24px);
  opacity: 0;
}

/* ---- Safe-area untuk bottom nav di HP dengan gesture bar/notch ---- */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Skeleton shimmer ---- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface-2);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: shimmer 1.4s infinite;
}
[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* ---- Progress bar indeterminate (fase "menyiapkan" export, sebelum ada angka % nyata) ---- */
@keyframes progressIndeterminate {
  0% { left: -35%; right: 100%; }
  60% { left: 100%; right: -35%; }
  100% { left: 100%; right: -35%; }
}
.progress-indeterminate {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--color-primary);
  border-radius: 9999px;
  animation: progressIndeterminate 1.4s ease-in-out infinite;
}

/* ---- Splash ---- */
.splash-logo-pulse {
  animation: splashPulse 1.6s var(--ease-standard) infinite;
}
@keyframes splashPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: .85; }
}

/* ---- Target sentuh minimum (Design.md §14) ---- */
.tap-target {
  min-height: 44px;
  min-width: 44px;
}

/* ---- Focus visible konsisten (aksesibilitas) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}