/*
 * Default light login theme.
 * The original black design remains untouched in login.css and is available
 * at login.html?theme=dark.
 */
html[data-login-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --line: #e6ddf8;
  --text: #0b0b12;
  --muted: #6b6877;
  --accent: #6d28d9;
  --accent2: #a855f7;
}

html[data-login-theme="light"] body {
  background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 58%, #f7f4ff 100%);
}

html[data-login-theme="light"] .login-glow {
  background:
    radial-gradient(
      circle at 50% -5%,
      rgba(139, 92, 246, 0.14),
      transparent 38%
    ),
    radial-gradient(
      circle at 8% 78%,
      rgba(168, 85, 247, 0.06),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 72%,
      rgba(109, 40, 217, 0.055),
      transparent 28%
    );
}

html[data-login-theme="light"] .login-nav {
  border-bottom: 1px solid rgba(230, 221, 248, 0.72);
}

html[data-login-theme="light"] .login-logo {
  color: #0b0b12;
}

html[data-login-theme="light"] .login-nav > a:last-child {
  color: #6b6877;
  transition: color 0.2s ease;
}

html[data-login-theme="light"] .login-nav > a:last-child:hover {
  color: #6d28d9;
}

html[data-login-theme="light"] .role-head > span,
html[data-login-theme="light"] .role-label {
  color: #6d28d9;
}

html[data-login-theme="light"] .role-head h1 {
  color: #0b0b12;
}

html[data-login-theme="light"] .role-card {
  color: #0b0b12;
  border-color: #e6ddf8;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 18px 50px rgba(44, 39, 82, 0.075),
    inset 0 1px #ffffff;
}

html[data-login-theme="light"] .role-card::before {
  background: rgba(139, 92, 246, 0.07);
}

html[data-login-theme="light"] .role-card.influencer {
  background: linear-gradient(145deg, #ffffff, #f7f4ff);
}

html[data-login-theme="light"] .role-card.brand {
  background: linear-gradient(145deg, #ffffff, #f7f4ff);
}

html[data-login-theme="dark"] .role-card.brand {
  background: linear-gradient(145deg, #171225, #0d0c12);
}

html[data-login-theme="light"] .role-card:hover {
  border-color: #8b5cf6;
  box-shadow: 0 28px 65px rgba(77, 52, 140, 0.15);
}

html[data-login-theme="light"] .role-icon {
  color: #ffffff;
  background: linear-gradient(145deg, #a855f7, #6d28d9);
  box-shadow: 0 15px 30px rgba(109, 40, 217, 0.2);
}

html[data-login-theme="light"] .role-arrow {
  color: #8b5cf6;
}

html[data-login-theme="light"] .role-card ul {
  color: #4f4c59;
}

html[data-login-theme="light"] .role-card li::before {
  color: #6d28d9;
  background: #f0eaff;
}

html[data-login-theme="light"] .role-note {
  color: #777381;
}