/* ═══════════════════════════════════════════════════
   RMS Design System — Sophisticated Zest
   The Kinetic Brasserie — COMMON (shared tokens & base)
   ═══════════════════════════════════════════════════ */

:root {
  /* Base surfaces */
  --color-background:               #121416;
  --color-surface:                  #121416;
  --color-surface-container-lowest: #0c0e10;
  --color-surface-container-low:    #1a1c1e;
  --color-surface-container:        #1e2022;
  --color-surface-container-high:   #282a2c;
  --color-surface-container-highest:#333537;
  --color-surface-bright:           #37393b;

  /* Primary — Sunset Orange */
  --color-primary:            #ffb68d;
  --color-primary-container:  #ff8a3d;
  --color-on-primary:         #532200;
  --color-on-primary-fixed:   #321200; /* NEVER white on orange */

  /* Secondary — Teal */
  --color-secondary:             #59dad1;
  --color-secondary-container:   #1a4d4a;
  --color-on-secondary:          #003734;
  --color-on-secondary-container:#59dad1;

  /* Tertiary — Lime */
  --color-tertiary:             #4ce346;
  --color-tertiary-container:   #1a3d18;
  --color-on-tertiary:          #003a03;
  --color-on-tertiary-container:#4ce346;

  /* Error */
  --color-error:           #ffb4ab;
  --color-error-container: #93000a;
  --color-on-error:        #690005;

  /* Text */
  --color-on-surface:         #e2e2e5;
  --color-on-surface-variant: #ddc1b3;
  --color-outline-variant:    #564338;

  /* Glassmorphism */
  --glass-bg:      rgba(46, 51, 56, 0.60);
  --glass-blur:    20px;
  --glass-nav-bg:  rgba(30, 32, 34, 0.70);
  --glass-nav-blur:20px;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

[data-bs-theme="light"] {
  /* Base surfaces */
  --color-background:               #fdfcfa;
  --color-surface:                  #fdfcfa;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #f5f4f1;
  --color-surface-container:        #ebeae6;
  --color-surface-container-high:   #e0dfda;
  --color-surface-container-highest:#d6d5d0;
  --color-surface-bright:           #ffffff;

  /* Text */
  --color-on-surface:         #1a1c1e;
  --color-on-surface-variant: #4a4846;
  --color-outline-variant:    #d1d0cb;

  /* Glassmorphism */
  --glass-bg:      rgba(255, 255, 255, 0.65);
  --glass-nav-bg:  rgba(253, 252, 250, 0.75);

  /* Adjust Secondary/Tertiary containers for better contrast in light mode */
  --color-secondary-container:   #bcece8;
  --color-on-secondary-container:#003734;
  --color-tertiary-container:    #bdf2b9;
  --color-on-tertiary-container: #003a03;
  --color-error-container:       #ffdad6;
  --color-on-error-container:    #410002;
  
  color-scheme: light;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-on-surface);
  margin: 0;
  min-height: 100vh;
}

/* ── Primary Button ── */
.btn-primary-rms {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-container));
  color: var(--color-on-primary-fixed);  /* #321200 — NEVER white */
  border-radius: 9999px;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 1.75rem;
  box-shadow: 0 0 20px rgba(255, 138, 61, 0.35);
  cursor: pointer;
  width: 100%;
  transition: box-shadow 150ms ease, transform 100ms ease;
}
.btn-primary-rms:hover {
  box-shadow: 0 0 28px rgba(255, 138, 61, 0.55);
  transform: translateY(-1px);
}
.btn-primary-rms:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* ── Ghost Button (tertiary) ── */
.btn-ghost-rms {
  background: transparent;
  color: var(--color-on-surface-variant);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  width: 100%;
  transition: background 150ms ease, color 150ms ease;
}
.btn-ghost-rms:hover {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}

/* ── Input Fields ── */
.input-rms {
  background: var(--color-surface-container-highest);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 0.75rem;
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.input-rms:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(89, 218, 209, 0.15);
}
.input-rms::placeholder { color: var(--color-on-surface-variant); opacity: 0.6; }

.input-label-rms {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-xs);
}

.input-error-rms {
  color: var(--color-error);
  font-size: 0.75rem;
  margin-top: var(--space-xs);
}

/* ── Glass Card ── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 1rem;
  border: none;
  padding: 2.5rem;
}

/* ── Auth Layout ── */
.auth-root {
  min-height: 100vh;
  display: flex;
  background: var(--color-background);
}
.auth-form-col {
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.auth-illus-col {
  width: 55%;
  background: var(--color-surface-container-low);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem;
  position: relative;
  overflow: hidden;
}
.auth-illus-headline {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-on-surface);
  line-height: 1.2;
  margin-bottom: 2rem;
}
.auth-illus-bullet {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-on-surface-variant);
  font-size: 0.9375rem;
  margin-bottom: 0.875rem;
}
.auth-illus-bullet i { color: var(--color-tertiary); }
.auth-form-card { width: 100%; max-width: 420px; }
.auth-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 0.5rem;
}
.auth-subtitle {
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  margin-bottom: 2rem;
}
.auth-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.auth-link:hover { text-decoration: underline; }

/* ── Onboarding Layout ── */
.onboarding-root {
  min-height: 100vh;
  background: var(--color-background);
  display: flex;
  flex-direction: column;
}
.onboarding-topstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  background: var(--color-surface-container-low);
}
.onboarding-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-on-surface);
}
.step-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-surface-container-high);
  transition: background 300ms ease;
}
.step-dot.active { background: var(--color-primary); }
.step-line {
  width: 48px;
  height: 1px;
  background: var(--color-surface-container-high);
}
.onboarding-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.onboarding-card {
  width: 100%;
  max-width: 640px;
  background: var(--color-surface-container);
  border-radius: 1rem;
  padding: 2.5rem;
}
.onboarding-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 0.5rem;
}
.onboarding-subtitle {
  font-size: 0.9375rem;
  color: var(--color-on-surface-variant);
  margin-bottom: 2rem;
}

/* ── Bootstrap Dropdown overrides ── */
.dropdown-menu {
  background: var(--color-surface-container-highest) !important;
  border: none !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}
.dropdown-item { color: var(--color-on-surface) !important; font-size: 0.875rem; }
.dropdown-item:hover { background: var(--color-surface-container-high) !important; }

/* ── Billing Alert ── */
.billing-alert {
  background: var(--color-error-container);
  color: var(--color-error);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .auth-illus-col { display: none; }
  .auth-form-col { width: 100%; }
}