/* ikas/Apple-like UI layer (shared across landing + auth + dashboard light mode)
   Keep backend/templates intact; this is purely presentation. */

:root {
  /* softer than full grey */
  --ui-bg: #fafafa;
  --ui-surface: rgba(255, 255, 255, 0.88);
  --ui-surface-solid: #ffffff;
  --ui-border: rgba(17, 24, 39, 0.10);
  --ui-border-soft: rgba(17, 24, 39, 0.08);
  --ui-text: #111827;
  --ui-muted: rgba(17, 24, 39, 0.62);
  --ui-muted-2: rgba(17, 24, 39, 0.52);
  --ui-shadow: 0 24px 70px rgba(17, 24, 39, 0.10);
  --ui-shadow-soft: 0 18px 55px rgba(17, 24, 39, 0.08);
  --ui-radius: 18px;
  --ui-radius-lg: 22px;
  --ui-ring: 0 0 0 6px rgba(16, 185, 129, 0.10);
}

/* Base canvas */
html, body {
  background: #ffffff;
  color: var(--ui-text);
}

/* Generic page container helpers */
.ui-page {
  min-height: 100vh;
}
.ui-section {
  position: relative;
}
.ui-eyebrow {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(4, 120, 87, 0.92);
}
.ui-title {
  letter-spacing: -0.02em;
}
.ui-lead {
  color: var(--ui-muted);
}

/* Cards */
.ui-card,
.soft-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-soft);
  box-shadow: var(--ui-shadow-soft);
  border-radius: var(--ui-radius);
}
.ui-card:hover,
.soft-card:hover {
  box-shadow: var(--ui-shadow);
}

/* Glass / sticky panels */
.ui-glass {
  background: rgba(245, 245, 247, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ui-border-soft);
}

/* Inputs: consistent neutral look */
input, textarea, select {
  background: rgba(255,255,255,0.92);
  color: var(--ui-text);
  border-color: rgba(17,24,39,0.14);
}
input::placeholder, textarea::placeholder { color: rgba(17,24,39,0.42); }

/* Buttons (optional helpers; existing Tailwind classes still work) */
.ui-btn {
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ui-btn-primary {
  background: linear-gradient(90deg, #059669 0%, #10b981 100%);
  color: rgba(255,255,255,0.98);
  box-shadow: 0 18px 50px rgba(16,185,129,0.24);
  border: 1px solid rgba(16,185,129,0.25);
}
.ui-btn-primary:hover {
  filter: brightness(1.02);
}
.ui-btn-secondary {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(17,24,39,0.12);
  color: rgba(17,24,39,0.86);
}
.ui-btn-secondary:hover {
  background: rgba(255,255,255,0.98);
}

/* Neutral separators */
.ui-divider {
  border-color: rgba(17,24,39,0.08) !important;
}

/* Auth pages: background blobs without hardcoding green everywhere */
body.ui-auth::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(880px 520px at 16% 18%, rgba(59,130,246,0.10), rgba(245,245,247,0) 62%),
    radial-gradient(820px 520px at 86% 22%, rgba(16,185,129,0.10), rgba(245,245,247,0) 64%),
    radial-gradient(950px 560px at 52% 92%, rgba(99,102,241,0.10), rgba(245,245,247,0) 62%),
    radial-gradient(circle at 1px 1px, rgba(17,24,39,0.05) 1px, rgba(245,245,247,0) 1px);
  background-size: auto, auto, auto, 18px 18px;
}