/*
 * Solar Capture customer theme.
 *
 * The portal keeps one canonical /design-system.css at runtime. ThemeService
 * copies this file there on activation; importing the shared base keeps the
 * product skin small while retaining the portal's accessibility and responsive
 * layout rules.
 */
@import url('/assets/themes/default-proton/design-system.css');

:root {
  --primary-dark: #241a4a;
  --midnight: #31265f;
  --deep-ocean: #4d3d8f;
  --accent-yellow: #6d4aff;
  --accent-gold: #6d4aff;
  --accent-yellow-light: #e9e3ff;
  --brand-primary: #6d4aff;
  --primary-color: #6d4aff;
  --neutral-gray: #dedbec;
  --border: #dedbec;
  --surface-shadow: #f7f6fc;
  --text-primary: #21183f;
  --text-secondary: #514a68;
  --text-muted: #746d87;
  --text-disabled: #a09aad;
  --shadow-soft: 0 12px 30px rgba(43, 29, 97, 0.08);
  --shadow-medium: 0 24px 60px rgba(43, 29, 97, 0.13);
  --shadow-focus: 0 0 0 4px rgba(109, 74, 255, 0.18);
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

body,
.auth-page {
  background:
    radial-gradient(circle at 86% 4%, rgba(109, 74, 255, 0.13), transparent 25%),
    radial-gradient(circle at 6% 96%, rgba(39, 221, 177, 0.10), transparent 24%),
    var(--surface-shadow);
}

.nav,
body.home-page .nav.nav--marketing-home {
  min-height: 72px;
  padding: 10px 28px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(36, 26, 74, 0.10);
  box-shadow: 0 3px 18px rgba(43, 29, 97, 0.05);
}

.nav-brand img {
  height: 42px;
  max-width: min(250px, 62vw);
}

.nav-links a,
body.home-page .nav.nav--marketing-home .nav-links a {
  color: var(--text-secondary);
  font-weight: 600;
}

.nav-links a:hover,
body.home-page .nav.nav--marketing-home .nav-links a:hover {
  color: var(--brand-primary);
}

/* The shared shell treats an active item as if it sits on a dark nav. Solar
 * Capture uses a light nav, so retain the brand violet instead of lavender. */
.nav-links li a.active {
  color: var(--brand-primary);
}

.dashboard-page {
  background:
    radial-gradient(circle at top right, rgba(109, 74, 255, 0.12), transparent 22%),
    radial-gradient(circle at top left, rgba(233, 227, 255, 0.72), transparent 20%),
    var(--surface-shadow);
}

.dashboard-header {
  background: linear-gradient(135deg, #372580 0%, #5b3ce0 100%);
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.dashboard-header p {
  color: rgba(255, 255, 255, 0.82);
}

.auth-main {
  padding: 56px 24px;
}

.auth-card {
  border-color: rgba(109, 74, 255, 0.16);
  box-shadow: var(--shadow-medium);
}

.auth-logo h1 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.btn.btn-primary {
  background: #6d4aff;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(109, 74, 255, 0.24);
}

.btn.btn-primary:hover {
  background: #5937de;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}

@media (max-width: 640px) {
  .nav,
  body.home-page .nav.nav--marketing-home {
    min-height: 64px;
    padding: 8px 16px;
  }

  .nav-brand img {
    height: 36px;
  }

  .auth-main {
    padding: 32px 16px;
  }
}