/* OctaSpace Design System Layout Styles for Auth Pages */
/* Scope all styles to auth layout only */
.auth-layout {
  /* Font rendering optimization - these are not available in Tailwind */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  /* Note: -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing are handled by Tailwind's 'antialiased' class */
  /* Viewport units - not easily covered by Tailwind */
  width: 100vw;
  width: 100dvw;
  /* Dynamic viewport width for mobile browsers */
  height: 100vh;
  height: 100dvh;
  /* Dynamic viewport height for mobile browsers */
  min-height: 100vh;
  min-height: 100dvh;
  /* Main container styling moved to Tailwind classes in HTML */
  /* Scrollbar styling moved to utility classes */
  /* Container responsive behavior - now handled by Tailwind classes */
  /* Typography base styles */
  /* Focus ring styling - only for elements without specific focus classes */
  /* Animation preferences */
  /* Color scheme moved to utility classes */
  /* Glass morphism backdrop support */
  /* Fallback for browsers without backdrop-filter */
  /* Print styles */
  /* High contrast mode support */
  /* Fix autofill styles - prevent browser default yellow/olive background */
  /* Firefox autofill fix */
  /* Performance optimizations */
  /* Apply will-change only to specific interactive elements */ }
  .auth-layout h1, .auth-layout h2, .auth-layout h3, .auth-layout h4, .auth-layout h5, .auth-layout h6 {
    font-family: 'Satoshi Variable', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em; }
  .auth-layout p, .auth-layout span, .auth-layout a, .auth-layout button, .auth-layout input, .auth-layout label {
    font-family: 'Satoshi Variable', sans-serif; }
  .auth-layout *:focus-visible:not(.focus-visible\:ring-ring\/50):not(.focus-visible\:ring-\[3px\]) {
    outline: none;
    box-shadow: 0 0 0 2px #0a0a0a, 0 0 0 4px #d4d4d4; }
  @media (prefers-reduced-motion: reduce) {
    .auth-layout *, .auth-layout *::before, .auth-layout *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; } }
  @supports (backdrop-filter: blur(20px)) {
    .auth-layout .glass-effect {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px); } }
  @supports not (backdrop-filter: blur(20px)) {
    .auth-layout .glass-effect {
      background-color: rgba(255, 255, 255, 0.98) !important;
      /* Light theme fallback */ }
    html.dark .auth-layout .glass-effect {
      background-color: rgba(11, 9, 11, 0.98) !important;
      /* Dark theme fallback */ } }
  @media print {
    .auth-layout {
      background: white !important;
      color: black !important; }
      .auth-layout main {
        background: white !important; } }
  @media (prefers-contrast: high) {
    .auth-layout {
      --border-neutral: rgba(255, 255, 255, 0.3);
      --input-border: rgba(255, 255, 255, 0.3); } }
  .auth-layout input:-webkit-autofill,
  .auth-layout input:-webkit-autofill:hover,
  .auth-layout input:-webkit-autofill:focus,
  .auth-layout input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input) inset !important;
    -webkit-text-fill-color: var(--foreground) !important;
    background-color: var(--input) !important;
    background-clip: content-box !important; }
  .auth-layout input:-moz-autofill {
    background-color: var(--input) !important;
    color: var(--foreground) !important; }
  .auth-layout * {
    will-change: auto; }
  .auth-layout button:hover, .auth-layout button:focus,
  .auth-layout input:hover, .auth-layout input:focus,
  .auth-layout .hover-lift:hover,
  .auth-layout .hover-lift-primary:hover,
  .auth-layout .hover-lift-secondary:hover {
    will-change: transform, opacity, background-color, border-color, box-shadow; }