/* ==========================================================================
   Carbon REI — Auth pages (login / signup)
   Ported from the custom landing page design. Every rule is scoped under
   .onyx-auth so it can't bleed into the rest of the app — this file is
   linked only on /login and /signup, never globally.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');

.onyx-auth{
  color-scheme: dark;

  --bg: #0a0908;
  --bg-alt: #0f0e0c;
  --surface: #151310;
  --surface-2: #1c1914;
  --surface-3: #24201a;
  --border: rgba(214, 164, 96, 0.14);
  --border-strong: rgba(214, 164, 96, 0.28);

  --text-primary: #f6f2ea;
  --text-secondary: #b8ae9e;
  --text-tertiary: #837a6c;

  --bronze-100: #f7e6c9;
  --bronze-300: #e3b573;
  --bronze-500: #cd8b3f;
  --bronze-600: #b9752f;
  --bronze-700: #8f5a24;
  --bronze-900: #4a2e14;

  --gradient-bronze: linear-gradient(135deg, #f7dfa5 0%, #d99a4e 42%, #a85f24 78%, #7a4419 100%);
  --gradient-radial-glow: radial-gradient(circle at 30% 20%, rgba(217,154,78,0.25), transparent 60%);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.55);
  --shadow-bronze: 0 8px 30px rgba(205, 139, 63, 0.25);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  position: relative;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

.onyx-auth[data-theme="light"]{
  color-scheme: light;
  --bg: #faf7f2;
  --bg-alt: #f3ede2;
  --surface: #ffffff;
  --surface-2: #fbf6ee;
  --surface-3: #f1e9d9;
  --border: rgba(122, 68, 25, 0.14);
  --border-strong: rgba(122, 68, 25, 0.26);

  --text-primary: #1c1712;
  --text-secondary: #5c5244;
  --text-tertiary: #8a8071;

  --shadow-sm: 0 2px 8px rgba(30,20,10,0.06);
  --shadow-md: 0 12px 32px rgba(30,20,10,0.08);
  --shadow-lg: 0 24px 64px rgba(30,20,10,0.12);
  --shadow-bronze: 0 8px 30px rgba(205, 139, 63, 0.18);
}

.onyx-auth, .onyx-auth *, .onyx-auth *::before, .onyx-auth *::after{ box-sizing: border-box; }
.onyx-auth img{ max-width: 100%; display: block; }
.onyx-auth a{ color: inherit; text-decoration: none; }
.onyx-auth button{ font-family: inherit; cursor: pointer; }
.onyx-auth input{ font-family: inherit; }
.onyx-auth h1{ font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; }

.onyx-auth .bg-glow{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(600px circle at 15% 10%, rgba(217,154,78,0.14), transparent 60%),
    radial-gradient(500px circle at 85% 30%, rgba(217,154,78,0.10), transparent 60%),
    radial-gradient(700px circle at 50% 90%, rgba(217,154,78,0.08), transparent 60%);
  transition: opacity 0.4s var(--ease);
}
.onyx-auth[data-theme="light"] .bg-glow{ opacity: 0.6; }

.onyx-auth .theme-toggle{
  position: fixed;
  top: 24px; right: 24px; z-index: 20;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}
.onyx-auth .theme-toggle:hover{ border-color: var(--bronze-500); transform: rotate(20deg); }
.onyx-auth .theme-toggle svg{ width: 18px; height: 18px; }
.onyx-auth .theme-toggle .sun{ display: none; }
.onyx-auth[data-theme="light"] .theme-toggle .moon{ display: none; }
.onyx-auth[data-theme="light"] .theme-toggle .sun{ display: block; }

.onyx-auth .auth-wrap{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.onyx-auth .auth-visual{
  position: relative;
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(500px circle at 20% 10%, rgba(247,223,165,0.18), transparent 60%),
    linear-gradient(160deg, #1c140a 0%, #0a0908 70%);
  color: #f6f2ea;
  overflow: hidden;
}
.onyx-auth[data-theme="light"] .auth-visual{
  background:
    radial-gradient(500px circle at 20% 10%, rgba(247,223,165,0.5), transparent 60%),
    linear-gradient(160deg, #3a2a16 0%, #1c1712 70%);
}
.onyx-auth .auth-visual .logo{ color: #f6f2ea; }
.onyx-auth .auth-visual::after{
  content: '';
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,154,78,0.35), transparent 70%);
  bottom: -160px; right: -120px;
  filter: blur(20px);
}
.onyx-auth .logo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.onyx-auth .logo-img{ height: 44px; width: auto; display: block; }

.onyx-auth .auth-quote{ position: relative; z-index: 1; }
.onyx-auth .auth-quote p{ font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.5; margin-bottom: 20px; }
.onyx-auth .auth-quote .testimonial-person strong{ color: #f6f2ea; }
.onyx-auth .auth-quote .testimonial-person span{ color: rgba(246,242,234,0.6); }
.onyx-auth .testimonial-person{ display: flex; align-items: center; gap: 12px; margin-top: auto; }
.onyx-auth .avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gradient-bronze);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #221507; font-size: 0.9rem;
  flex-shrink: 0;
}
.onyx-auth .testimonial-person strong{ display: block; font-size: 0.92rem; }
.onyx-auth .testimonial-person span{ color: var(--text-tertiary); font-size: 0.82rem; }

.onyx-auth .auth-form-side{
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.onyx-auth .auth-form-side h1{ font-size: 1.9rem; margin-bottom: 10px; }
.onyx-auth .auth-form-side .sub{ color: var(--text-secondary); margin-bottom: 32px; font-size: 0.95rem; }

.onyx-auth .form-group{ margin-bottom: 20px; }
.onyx-auth .form-group label{ display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.onyx-auth .input-wrap{ position: relative; }
.onyx-auth .input-wrap svg.leading-icon{
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-tertiary); pointer-events: none;
}
.onyx-auth .form-group input{
  width: 100%;
  padding: 14px 16px 14px 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.onyx-auth .form-group input::placeholder{ color: var(--text-tertiary); }
.onyx-auth .form-group input:focus{
  outline: none;
  border-color: var(--bronze-500);
  box-shadow: 0 0 0 4px rgba(205,139,63,0.15);
}
.onyx-auth .form-group.error input{ border-color: #d9534f; }
.onyx-auth .form-error-msg{ color: #e08079; font-size: 0.8rem; margin-top: 6px; }

.onyx-auth .toggle-visibility{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-tertiary);
  display: flex; padding: 4px;
}
.onyx-auth .toggle-visibility svg{ width: 18px; height: 18px; }
.onyx-auth .toggle-visibility:hover{ color: var(--text-primary); }

.onyx-auth .form-row-between{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; font-size: 0.88rem; }
.onyx-auth .checkbox-row{ display: flex; align-items: center; gap: 8px; color: var(--text-secondary); transition: color 0.3s var(--ease); }
.onyx-auth .checkbox-row input{ accent-color: var(--bronze-500); width: 16px; height: 16px; }
.onyx-auth .link-bronze{ color: var(--bronze-300); font-weight: 600; background: none; border: none; padding: 0; font-size: inherit; cursor: pointer; }
.onyx-auth .link-bronze:hover{ text-decoration: underline; }

.onyx-auth .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  white-space: nowrap;
}
.onyx-auth .btn:disabled{ opacity: 0.6; cursor: not-allowed; }
.onyx-auth .btn-primary{
  background: var(--gradient-bronze);
  color: #221507;
  box-shadow: var(--shadow-bronze);
}
.onyx-auth .btn-primary:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 14px 40px rgba(217,154,78,0.35); }
.onyx-auth .btn-primary:active:not(:disabled){ transform: translateY(0); }
.onyx-auth .btn-block{ width: 100%; }
.onyx-auth .btn-lg{ padding: 16px 32px; font-size: 1rem; }

.onyx-auth .auth-footer-link{ text-align: center; margin-top: 28px; font-size: 0.9rem; color: var(--text-secondary); }

.onyx-auth .password-strength{ display: flex; gap: 6px; margin-top: 10px; }
.onyx-auth .password-strength div{ height: 4px; flex: 1; border-radius: 2px; background: var(--surface-3); transition: background 0.3s var(--ease); }

.onyx-auth .auth-alert{
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  padding: 12px 14px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.onyx-auth .auth-alert-error{ border-color: rgba(217,80,80,0.4); color: #e08079; }
.onyx-auth .auth-alert-info{ color: var(--text-secondary); }
.onyx-auth .auth-alert a{ color: var(--bronze-300); font-weight: 600; }
.onyx-auth .auth-alert a:hover{ text-decoration: underline; }

@media (max-width: 980px){
  .onyx-auth .auth-visual{ display: none; }
  .onyx-auth .auth-wrap{ grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 760px){
  .onyx-auth .auth-form-side{ padding: 40px 28px; }
}