/* LuzOn brand tokens — soft baby blue + off-white */
:root {
  --bg:        #eff6ff;   /* page background — soft sky */
  --bg-soft:   #e0f2fe;
  --panel:     #f8fafc;   /* card/panel — off-white, easy on eyes */
  --panel-2:   #f1f5f9;
  --border:    #cbd5e1;
  --border-soft:#e2e8f0;
  --text:      #0f172a;
  --text-soft: #475569;
  --muted:     #64748b;

  --primary:      #38bdf8;   /* sky-400 — accent */
  --primary-hover:#0ea5e9;
  --primary-soft: #bae6fd;   /* sky-200 */
  --primary-tint: #e0f2fe;   /* sky-100 */
  --on-primary:   #0c4a6e;   /* dark sky for text on light primary */

  --success:   #10b981;
  --warning:   #f59e0b;
  --danger:    #ef4444;
}

html, body { background: var(--bg); color: var(--text); }

.brand-grad {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #f8fafc 100%);
}

.btn-primary {
  background: var(--primary);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.625rem;
  transition: background .15s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-soft {
  background: var(--primary-tint);
  color: var(--on-primary);
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  transition: background .15s;
}
.btn-soft:hover { background: var(--primary-soft); }

.btn-ghost {
  background: var(--panel-2);
  color: var(--text-soft);
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
}
.btn-ghost:hover { background: var(--border-soft); color: var(--text); }

.field {
  background: white;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  padding: 0.55rem 0.75rem;
  color: var(--text);
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }

.card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.scroll-y::-webkit-scrollbar { width: 8px; }
.scroll-y::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.scroll-y::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

[x-cloak] { display: none !important; }

/* Smooth page transitions — opt into View Transitions API where supported.
   Falls back to a tiny fade-in elsewhere so the sidebar stops flickering. */
@view-transition { navigation: auto; }

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: page-fade-in 120ms ease-out; }

/* Avoid white-flash by painting the page background ASAP */
html { background: var(--bg); }