// Brand palette derived from public/images/logo.png (teal key/globe on dark navy)
$brand-teal:      #2f8fae;
$brand-teal-dark: #1c5a70;
$brand-teal-light:#6fb8d1;
$brand-navy:      #0d1f26;
$brand-navy-soft: #16323f;
$brand-bg:        #f4f8f9;

// Bootstrap variable overrides (must come before the bootstrap import)
$primary:          $brand-teal;
$secondary:        $brand-navy-soft;
$dark:             $brand-navy;
$body-bg:          $brand-bg;
$body-color:       $brand-navy-soft;
$link-color:       $brand-teal;
$link-hover-color: $brand-teal-dark;
$border-radius:    .5rem;

@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons.css";

:root {
  --brand-teal: #{$brand-teal};
  --brand-teal-dark: #{$brand-teal-dark};
  --brand-navy: #{$brand-navy};
  --brand-navy-soft: #{$brand-navy-soft};
  --brand-bg: #{$brand-bg};
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1 0 auto;
}

.site-header {
  background: linear-gradient(90deg, $brand-navy, $brand-navy-soft);
}

.site-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.site-header .navbar-brand img {
  height: 36px;
  width: auto;
}

.site-footer {
  flex-shrink: 0;
  background: $brand-navy;
  color: rgba(255, 255, 255, .65);
}

.auth-card {
  max-width: 440px;
  margin: 3rem auto;
}