/*
 * Beta-theme styling for the static auth pages (login, register,
 * reset-password, verify-email, accept-invitation, complete-registration).
 *
 * Mirrors /pre-login/src/styles/global.css → :root.theme-beta:
 *   - warm tinted-paper background
 *   - white card surface, stone ink, deep crimson accent
 *   - Playfair Display headings + Inter body
 *
 * Design constraint: don't touch markup or break JS that toggles classes.
 * We override Tailwind 2 utilities directly so the existing utility classes
 * still work (typo banner stays yellow, error UI stays red, success UI stays
 * green — only blue/amber accents pick up the theme).
 *
 * Pair each <link rel="stylesheet" href="/css/auth-theme.css"> with the
 * Google Fonts <link> for Inter + Playfair Display.
 */

:root {
    --paper: #f4f0e6;
    --surface: #ffffff;
    --ink: #1c1917;
    --ink-muted: #57534e;
    --accent: #b91c1c;
    --accent-hover: #991b1b;
    --accent-soft: #fef2f2;
    --accent-soft-border: #fecaca;
    --border: #e7e5e4;
    --shadow: 0 10px 30px -8px rgba(28, 25, 23, 0.08),
              0 4px 10px -4px rgba(28, 25, 23, 0.04);
}

body.bg-gray-50 {
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Wrap the column (any max-w-* inside the centered min-h-screen flex) in a
   white card sitting on the paper background. Covers both max-w-md and
   max-w-2xl columns across the six auth pages. */
body > div.min-h-screen > div[class*="max-w-"] {
    background-color: var(--surface);
    padding: 2.75rem 3rem 2.25rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: var(--shadow);
}

/* Headings → Playfair Display */
body h2, body h3 {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: -0.01em;
}
body h2.text-3xl {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ink);
}
body h2.text-2xl {
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink);
}
body h2.text-xl {
    font-size: 1.4rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--ink);
}

/* Lead-icon roundels: keep geometry, swap blue-100/blue-600 → crimson tint.
   Same treatment for the (broken-in-Tailwind-2) amber-100/amber-600 used
   on reset-password.html. */
body .bg-blue-100,
body .bg-amber-100 { background-color: var(--accent-soft) !important; }
body .bg-blue-100 svg,
body .bg-amber-100 svg { color: var(--accent) !important; }

/* Map blue accent utilities → crimson. Override only blue/amber, never
   yellow (typo + throttle), red (error UI), or green (success UI). */
body .text-blue-600  { color: var(--accent) !important; }
body .text-blue-500  { color: var(--accent) !important; }
body .text-blue-400  { color: var(--accent) !important; }
body .text-blue-700  { color: var(--accent) !important; }
body .text-blue-800  { color: var(--accent) !important; }
body .text-amber-600 { color: var(--accent) !important; }
body .hover\:text-blue-500:hover { color: var(--accent-hover) !important; }
body .hover\:text-blue-800:hover { color: var(--accent-hover) !important; }
body .bg-blue-600    { background-color: var(--accent) !important; }
body .hover\:bg-blue-700:hover { background-color: var(--accent-hover) !important; }
body .bg-blue-50     { background-color: var(--accent-soft) !important; }
body .border-blue-200 { border-color: var(--accent-soft-border) !important; }
body .focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18) !important; }
body .focus\:border-blue-500:focus { border-color: var(--accent) !important; }
body .group:hover .group-hover\:text-blue-400 { color: rgba(255, 255, 255, 0.92) !important; }

/* Form fields: soften the gray border, stronger crimson focus state. */
body input.border-gray-300,
body select.border-gray-300,
body textarea.border-gray-300 { border-color: var(--border) !important; }
body input:focus,
body select:focus,
body textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.16) !important;
}
/* Lighter placeholders so they clearly read as hints, not pre-filled data.
   On the warm-paper card, stone-400 (#a8a29e) was reading as real values —
   stone-300 (#d6d3d1) sits well below the form text without disappearing. */
body input::placeholder,
body textarea::placeholder { color: #d6d3d1; }

/* Field labels — quieter ink shade. */
body label.text-gray-700 { color: var(--ink-muted) !important; font-weight: 500; }

/* Primary submit-style buttons — taller, slightly more letter-spacing.
   We target by ID (login, register, reset, complete-registration) so we
   only beef up the explicit primary action, not every inline button. */
body #loginBtn,
body #registerBtn,
body #resetBtn,
body #completeRegistrationBtn,
body #completeRegistrationForm button[type="submit"] {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 4px;
}

/* Divider sits on the surface, not gray-50. */
body .bg-gray-50.text-gray-500 {
    background-color: var(--surface) !important;
    color: var(--ink-muted) !important;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Google sign-in: matched padding + radius + neutral palette. */
body #googleSignInBtn {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-color: var(--border);
    border-radius: 4px;
    color: var(--ink);
    font-weight: 500;
}
body #googleSignInBtn:hover { background-color: #faf7f0; }

/* Soften gray separators on the page (legal links, etc.). */
body .border-gray-200 { border-color: var(--border) !important; }

/* "Back to home" / footer links → crimson on hover. */
body a.text-gray-600.hover\:text-gray-500:hover { color: var(--accent) !important; }

/* Round inputs to 4px to match the beta-theme card radius. */
body input.rounded-md,
body select.rounded-md,
body textarea.rounded-md { border-radius: 4px; }

/* Phones: full-bleed card so it doesn't feel cramped on small screens. */
@media (max-width: 640px) {
    body > div.min-h-screen > div[class*="max-w-"] {
        padding: 2rem 1.25rem;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
}