/* =========================================================
   Oral Oncology Registration Portal — Design System
   UI-only stylesheet. Existing PHP and application behavior
   remain unchanged.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --primary: #3361ff;
  --secondary: rgb(1, 234, 255);
  --primary-color: var(--primary);
  --secondary-color: var(--secondary);
  --primary-bg: var(--primary);
  --secondary-bg: #f4f7fc;
  --text-white: #ffffff;
  --text-color: #17233d;
  --muted-color: #68758b;
  --border-color: #dfe6f1;
  --theme-color: var(--primary);
  --theme-light: #eef3ff;
  --surface: #ffffff;
  --focus-ring: rgba(51, 97, 255, 0.22);
  --box-shadow: 0 18px 55px rgba(23, 43, 77, 0.12);
  --radius-lg: 20px;
  --radius-md: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text-color);
  background:
    radial-gradient(ellipse at 8% 0%, rgba(1, 234, 255, 0.12), transparent 34rem),
    radial-gradient(ellipse at 100% 100%, rgba(51, 97, 255, 0.08), transparent 34rem),
    var(--secondary-bg);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
button, input, select, textarea { font: inherit; }

a { color: var(--primary); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn {
  position: relative;
  border-radius: 10px;
  font-weight: 600;
  transition: background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.btn > * { position: relative; z-index: 1; }

::selection { color: #10214a; background: rgba(1, 234, 255, .42); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}