/* Skilzon — global styles & utility classes mirroring index.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { font-family: 'Poppins', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* dot pattern (uses currentColor) */
.dot-grid {
  background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px);
  background-size: 10px 10px;
}

.transition-smooth { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }

/* gradient utilities */
.bg-gradient-hero { background-image: linear-gradient(135deg, hsl(218 65% 21%) 0%, hsl(218 70% 28%) 50%, hsl(198 80% 53%) 130%); }
.bg-gradient-sky  { background-image: linear-gradient(135deg, hsl(198 80% 53%) 0%, hsl(208 85% 60%) 100%); }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Toast (sonner-lite) */
#toaster { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; }
#toaster .t {
  pointer-events: auto;
  background: hsl(218 70% 16%); color: #fff; padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 10px 40px -12px rgba(0,0,0,.4);
  font-size: 14px; max-width: 360px;
  animation: toast-in .25s ease both;
}
#toaster .t.success { background: hsl(150 70% 35%); }
#toaster .t.error   { background: hsl(0 75% 50%); }
#toaster .t.info    { background: hsl(218 70% 16%); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: 16px; max-width: 720px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 24px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); }

/* Forms */
.input, .select-trigger {
  display: flex; height: 40px; width: 100%; border-radius: 6px;
  border: 1px solid hsl(214.3 31.8% 91.4%); background: #fff;
  padding: 0 12px; font-size: 14px; color: hsl(218 70% 15%);
}
.input:focus, .select-trigger:focus { outline: 2px solid hsl(198 80% 53% / .35); outline-offset: 1px; }
.label { font-size: 14px; font-weight: 500; color: hsl(218 70% 15%); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 500; transition: all .2s; cursor: pointer; border: 0; }
.btn-primary { background: hsl(218 70% 16%); color: #fff; }
.btn-primary:hover { background: hsl(218 65% 21%); }
.btn-sky { background: hsl(198 80% 53%); color: hsl(218 70% 16%); }
.btn-sky:hover { background: hsl(198 80% 48%); }
.btn-outline { background: transparent; border: 1px solid hsl(214.3 31.8% 91.4%); color: hsl(218 70% 15%); }
.btn-outline:hover { background: hsl(210 40% 96%); }
.btn-ghost { background: transparent; color: hsl(218 70% 15%); }
.btn-ghost:hover { background: hsl(210 40% 96%); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* Spinner */
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-secondary { background: hsl(210 40% 96%); color: hsl(218 70% 15%); }
.badge-outline { border: 1px solid hsl(214.3 31.8% 91.4%); }
.badge-success { background: #dcfce7; color: #166534; }