/* ─── Tailwind-equivalent utility styles for signup/login pages ─────────────
   Replaces cdn.tailwindcss.com (removes ~350KB render-blocking script).
   Covers every class used on signup.html and login.html only.
   ──────────────────────────────────────────────────────────────────────────── */

/* Reset / base ---------------------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box; }
body { margin: 0; }

/* Layout --------------------------------------------------------------------- */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-1     { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.block  { display: block; }
.hidden { display: none; }
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.w-4  { width: 1rem; }
.w-8  { width: 2rem; }
.w-12 { width: 3rem; }
.h-4  { height: 1rem; }
.h-8  { height: 2rem; }
.h-12 { height: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-\[400px\]  { max-width: 400px; }
.max-w-\[1080px\] { max-width: 1080px; }

/* Spacing -------------------------------------------------------------------- */
.gap-1   { gap: 0.25rem; }
.gap-2   { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.p-1\.5 { padding: 0.375rem; }
.p-2    { padding: 0.5rem; }
.p-3    { padding: 0.75rem; }
.p-8    { padding: 2rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pb-12  { padding-bottom: 3rem; }
.pr-11  { padding-right: 2.75rem; }
.mb-1   { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-5   { margin-bottom: 1.25rem; }
.mb-6   { margin-bottom: 1.5rem; }
.mb-8   { margin-bottom: 2rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-5    { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem; }

/* Positioning ---------------------------------------------------------------- */
.top-1\/2   { top: 50%; }
.right-2\.5 { right: 0.625rem; }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* Typography ----------------------------------------------------------------- */
.font-sans     { font-family: 'DM Sans', system-ui, sans-serif; }
.font-mono     { font-family: 'DM Mono', monospace; }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }
.text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.text-\[15px\] { font-size: 15px; }
.text-\[14px\] { font-size: 14px; }
.text-\[13px\] { font-size: 13px; }
.text-\[12px\] { font-size: 12px; }
.text-center   { text-align: center; }
.tracking-tight      { letter-spacing: -0.025em; }
.tracking-\[0\.4em\] { letter-spacing: 0.4em; }
.tracking-normal     { letter-spacing: 0; }
.leading-relaxed { line-height: 1.625; }
.underline     { text-decoration-line: underline; }
.select-none   { user-select: none; }
.cursor-pointer { cursor: pointer; }
.placeholder-text-base::placeholder { font-size: 1rem; }
.placeholder\:text-base::placeholder { font-size: 1rem; }
.placeholder\:tracking-normal::placeholder { letter-spacing: 0; }

/* Colors — light mode -------------------------------------------------------- */
.bg-white { background-color: #ffffff; }
.bg-\[\#fafafa\] { background-color: #fafafa; }
.bg-brand        { background-color: #9b6dff; }
.bg-brand-muted  { background-color: #f6f2ff; }
.bg-red-50       { background-color: #fef2f2; }
.bg-green-50     { background-color: #f0fdf4; }
.border-red-200  { border-color: #fecaca; }
.border-green-100 { border-color: #dcfce7; }
.border-ink-ghost  { border-color: rgba(0,0,0,0.10); }
.border-black\/10  { border-color: rgba(0,0,0,0.10); }
.border-black\/\[0\.06\] { border-color: rgba(0,0,0,0.06); }
.border-black\/20  { border-color: rgba(0,0,0,0.20); }
.text-ink          { color: #1a1a1a; }
.text-ink-secondary { color: #6b6b6b; }
.text-ink-tertiary  { color: #999999; }
.text-brand        { color: #9b6dff; }
.text-white        { color: #ffffff; }
.text-red-700      { color: #b91c1c; }
.text-green-700    { color: #15803d; }
.text-amber-600    { color: #d97706; }
.placeholder\:text-ink-tertiary::placeholder { color: #999999; }

/* Borders -------------------------------------------------------------------- */
.border    { border-width: 1px; border-style: solid; }
.rounded   { border-radius: 0.25rem; }
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }

/* Transitions ---------------------------------------------------------------- */
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.transition-all    { transition-property: all; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }

/* Hover states --------------------------------------------------------------- */
.hover\:bg-brand-hover:hover  { background-color: #8257e6; }
.hover\:text-brand-hover:hover { color: #8257e6; }
.hover\:text-ink:hover  { color: #1a1a1a; }
.hover\:bg-black\/\[0\.04\]:hover { background-color: rgba(0,0,0,0.04); }

/* Disabled ------------------------------------------------------------------- */
.disabled\:opacity-50:disabled      { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* Focus ---------------------------------------------------------------------- */
.focus\:ring-brand\/30:focus { box-shadow: 0 0 0 2px rgba(155,109,255,0.3); }

/* Dark mode ------------------------------------------------------------------ */
:root.dark .dark\:bg-\[\#0d0d10\]  { background-color: #0d0d10; }
:root.dark .dark\:bg-\[\#17171b\]  { background-color: #17171b; }
:root.dark .dark\:bg-brand\/15     { background-color: rgba(155,109,255,0.15); }
:root.dark .dark\:bg-red-500\/10   { background-color: rgba(239,68,68,0.10); }
:root.dark .dark\:bg-green-500\/10 { background-color: rgba(34,197,94,0.10); }
:root.dark .dark\:bg-white\/\[0\.06\] { background-color: rgba(255,255,255,0.06); }
:root.dark .dark\:border-white\/10 { border-color: rgba(255,255,255,0.10); }
:root.dark .dark\:border-white\/15 { border-color: rgba(255,255,255,0.15); }
:root.dark .dark\:border-red-500\/30   { border-color: rgba(239,68,68,0.30); }
:root.dark .dark\:border-green-500\/25 { border-color: rgba(34,197,94,0.25); }
:root.dark .dark\:text-\[\#e8e8ea\]  { color: #e8e8ea; }
:root.dark .dark\:text-\[\#a0a0a8\]  { color: #a0a0a8; }
:root.dark .dark\:text-\[\#7e7e88\]  { color: #7e7e88; }
:root.dark .dark\:text-red-300   { color: #fca5a5; }
:root.dark .dark\:text-green-300 { color: #86efac; }
:root.dark .dark\:text-amber-400 { color: #fbbf24; }
:root.dark .dark\:block  { display: block; }
:root.dark .dark\:hidden { display: none; }
:root.dark .dark\:hover\:bg-white\/\[0\.06\]:hover { background-color: rgba(255,255,255,0.06); }
:root.dark .dark\:hover\:text-\[\#e8e8ea\]:hover { color: #e8e8ea; }
:root.dark .dark\:placeholder\:text-\[\#6e6e78\]::placeholder { color: #6e6e78; }
:root.dark .dark\:bg-\[\#0d0d10\] { background-color: #0d0d10; }

/* dark:hidden means visible in light, hidden in dark */
:root.dark .dark\:hidden { display: none; }
/* block means visible in light, dark:block means visible in dark */
:root:not(.dark) .dark\:block { display: none; }