/* Premium UI Kit (global) - keeps existing brand colors (emerald/green + dark + white)
   Focus: spacing, typography, depth, subtle motion, scroll reveals. */

:root{
  --brand: #10b981;      /* emerald-500 */
  --brand-600:#059669;   /* emerald-600 */
  --ink:#0f172a;         /* slate-900 */
  --muted:#475569;       /* slate-600 */
  --surface:#ffffff;
  --surface-2: rgba(255,255,255,.72);
  --border: rgba(15,23,42,.08);
  --shadow: 0 14px 50px rgba(2,6,23,.10);
  --shadow-2: 0 22px 80px rgba(2,6,23,.14);
}

html{ scroll-behavior:smooth; }
body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle premium background helper (opt-in via .app-bg) */
.app-bg{
  background:
    radial-gradient(circle at 10% 0%, rgba(16,185,129,.10), transparent 42%),
    radial-gradient(circle at 90% 10%, rgba(15,23,42,.06), transparent 46%),
    linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(255,255,255,1) 100%);
}

/* Modern card system (auto-applied by ui.js) */
.app-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.app-card:hover{
  box-shadow: var(--shadow-2);
  border-color: rgba(16,185,129,.18);
}
.app-card--solid{
  background: var(--surface);
  backdrop-filter: none;
}

/* Premium buttons (non-destructive; only used when class is added) */
.btn-premium{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: .9rem;
  padding:.85rem 1.15rem;
  font-weight:700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-premium:hover{ transform: translateY(-1px); }
.btn-premium:active{ transform: translateY(0); }
.btn-premium--brand{
  background: var(--brand-600);
  color:#fff;
  box-shadow: 0 12px 30px rgba(16,185,129,.22);
}
.btn-premium--brand:hover{ background: var(--brand); }

/* Section dividers */
.divider-soft{
  height:1px;
  width:100%;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.10), transparent);
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}
.reveal.reveal-left{ transform: translateX(-16px); }
.reveal.reveal-right{ transform: translateX(16px); }
.reveal.reveal-left.is-visible,
.reveal.reveal-right.is-visible{ transform: translateX(0); }

/* Subtle floating background blobs (opt-in) */
.floaty{
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .floaty{ animation:none !important; }
  .app-card, .btn-premium{ transition:none !important; }
}