/* assets/css/ui.comfort.css
   Small, safe UI polish: nicer buttons + subtle animations.
   Loaded after overrides.css
*/

:root{
  --ui-primary: #3b82f6;
  --ui-accent:  #22d3ee;
  --ui-danger:  #fb7185;
  --ui-text: rgba(255,255,255,.94);
  --glass-1: rgba(255,255,255,.12);
  --glass-2: rgba(255,255,255,.06);
  --shadow-1: 0 10px 28px rgba(0,0,0,.28);
  --shadow-2: 0 16px 46px rgba(0,0,0,.38);
  --ring:     0 0 0 4px rgba(34,211,238,.14);
}

/* Comfortable premium buttons (works for plain <button> + your .primary/.danger) */
button, .btn, input[type="button"], input[type="submit"]{
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--ui-text);
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
  box-shadow: var(--shadow-1);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

button:hover, .btn:hover, input[type="button"]:hover, input[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  filter: brightness(1.06);
  border-color: rgba(255,255,255,.25);
}

button:active, .btn:active, input[type="button"]:active, input[type="submit"]:active{
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow: 0 10px 32px rgba(0,0,0,.30);
}

button:focus-visible, .btn:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible{
  outline: none;
  box-shadow: var(--shadow-1), var(--ring);
}

/* nice soft shine */
button::before, .btn::before, input[type="button"]::before, input[type="submit"]::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(160px 80px at 18% 0%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(220px 90px at 85% -10%, rgba(34,211,238,.18), transparent 55%);
  opacity:.95;
  pointer-events:none;
}

/* Your project uses class="primary" and class="danger" */
button.primary, .btn.primary{
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(34,211,238,.62));
  border-color: rgba(34,211,238,.55);
  color: rgba(0,0,0,.88);
}
button.danger, .btn.danger{
  background: linear-gradient(180deg, rgba(251,113,133,.95), rgba(239,68,68,.60));
  border-color: rgba(251,113,133,.55);
  color: rgba(0,0,0,.88);
}

/* Tiny modal open animation (non-breaking) */
@keyframes popIn { from { transform: translateY(8px) scale(.985); opacity:0 } to { transform: translateY(0) scale(1); opacity:1 } }
.modal:not(.hidden) .modal-card{ animation: popIn .18s ease both; }

/* Extra comfort: soft glow for primary/danger */
button.primary:hover, .btn.primary:hover{ box-shadow: 0 16px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(34,211,238,.18) inset, 0 0 22px rgba(34,211,238,.18); }
button.danger:hover, .btn.danger:hover{ box-shadow: 0 16px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(251,113,133,.18) inset, 0 0 22px rgba(251,113,133,.18); }

/* Slightly softer corners for small control buttons */
#controls button{ border-radius: 12px; }


/* Extra comfort: soft glow for primary/danger */
button.primary:hover, .btn.primary:hover{
  box-shadow: 0 16px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(34,211,238,.18) inset, 0 0 22px rgba(34,211,238,.18);
}
button.danger:hover, .btn.danger:hover{
  box-shadow: 0 16px 52px rgba(0,0,0,.42), 0 0 0 1px rgba(251,113,133,.18) inset, 0 0 22px rgba(251,113,133,.18);
}