/* Shared production UX guardrails. Page-specific styles still own layout. */
:root {
    color-scheme: dark;
    --vybe-accent: #8b5cf6;
    --vybe-accent-strong: #7c3aed;
    --vybe-pink: #ec4899;
    --vybe-focus: #c4b5fd;
    --vybe-danger: #fb7185;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
summary,
label[for] {
    touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--vybe-focus) !important;
    outline-offset: 3px !important;
}

button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: 0.58;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Auth and room entry now belong to the same VYBE visual system. */
.auth-page .brand-name,
.join-page .room-name {
    background: linear-gradient(135deg, #a78bfa, #ec4899) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.25)) !important;
}

.auth-page .submit-btn,
.join-page .btn-join {
    background: linear-gradient(135deg, var(--vybe-accent-strong), var(--vybe-pink)) !important;
    color: #fff !important;
    min-height: 50px;
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.22);
}

.auth-page .input-wrapper input:focus,
.join-page input[type="text"]:focus {
    border-color: rgba(167, 139, 250, 0.8) !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14) !important;
}

.auth-page .input-wrapper input:focus ~ label,
.auth-page .text-link,
.auth-page a,
.join-page .host-login a:hover {
    color: #a78bfa !important;
}

.auth-page .auth-card,
.join-page .card {
    border-color: rgba(167, 139, 250, 0.16) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.social-page .profile-btn,
.social-page .nav-hamburger,
.social-page .drawer-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 380px) {
    .social-page .nav-actions > .btn-ghost {
        display: none;
    }
    .social-page .nav-actions > .btn-primary {
        padding-inline: 14px !important;
    }
    .social-page .nav {
        gap: 8px !important;
    }
}

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

@media (forced-colors: active) {
    button, a, input, select, textarea, summary {
        forced-color-adjust: auto;
    }
}