/* Celvesta walnut + ivory theme (light mode only) */
:root:not(.dark) {
  --background: #F5F2EE;
  --foreground: #3A302A;
  --card: #FBF9F6;
  --card-foreground: #3A302A;
  --popover: #FBF9F6;
  --popover-foreground: #3A302A;
  --primary: #6B4632;
  --primary-foreground: #F5F2EE;
  --secondary: #EAE2D8;
  --secondary-foreground: #4A3526;
  --muted: #EAE2D8;
  --muted-foreground: #7A6A5E;
  --accent: #E9DFD2;
  --accent-foreground: #4A3526;
  --border: #DDD2C4;
  --input: #DDD2C4;
  --ring: #B08D57;
  --chart-1: #6B4632;
  --chart-2: #B08D57;
  --chart-3: #8A6748;
  --chart-4: #C9A66B;
  --chart-5: #8C6A4F;
  --sidebar: #3A261C;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #B08D57;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #6B4632;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #5A3B2B;
  --sidebar-ring: #B08D57;
}

/* Celvesta login panel: wordmark, tagline, features, network pattern */
#auth .background {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 25% 20%, rgba(176, 141, 87, 0.22), transparent 60%),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23B08D57' stroke-opacity='0.14' stroke-width='1'><path d='M10 30 L80 70 L150 20 M80 70 L110 140 L40 160 L10 30 M110 140 L170 120 L150 20'/></g><g fill='%23B08D57' fill-opacity='0.35'><circle cx='10' cy='30' r='2.5'/><circle cx='80' cy='70' r='2.5'/><circle cx='150' cy='20' r='2.5'/><circle cx='110' cy='140' r='2.5'/><circle cx='40' cy='160' r='2.5'/><circle cx='170' cy='120' r='2.5'/></g></svg>") 0 0 / 180px 180px repeat,
    linear-gradient(135deg, #3A261C 0%, #24150E 100%);
  border-left: 3px solid #B08D57;
}
#auth .background::before {
  content: "CELVESTA";
  display: block;
  width: fit-content;
  color: #F5F2EE;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0.32em;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 2px solid #B08D57;
}
#auth .background::after {
  content: "Carrier-grade voice, simply managed\A\A Live call monitoring\A Real-time statistics\A Secure account access";
  display: block;
  white-space: pre-line;
  color: rgba(245, 242, 238, 0.9);
  font-size: 16px;
  line-height: 2.4em;
  padding-left: 1.6em;
  background:
    radial-gradient(circle, #B08D57 0.2em, transparent 0.22em) 0 5.5em / 1em 1em no-repeat,
    radial-gradient(circle, #B08D57 0.2em, transparent 0.22em) 0 7.9em / 1em 1em no-repeat,
    radial-gradient(circle, #B08D57 0.2em, transparent 0.22em) 0 10.3em / 1em 1em no-repeat;
}

/* Celvesta login: phones and narrow windows. The stock portal hides the panel here;
   this keeps the brand as a header band above the form. */
@media screen and (max-width: 800px) {
  #auth { flex-direction: column; justify-content: flex-start; }
  #auth .background {
    flex: 0 0 auto;
    padding: 38px 34px 28px 34px;
    border-left: 0;
    border-bottom: 3px solid #B08D57;
  }
  #auth .background::before {
    font-size: 26px;
    letter-spacing: 0.28em;
    padding-bottom: 12px;
    margin-bottom: 0;
  }
  #auth .background::after { display: none; }
  #auth .login-form-container { width: 100%; flex: 1 1 auto; }
}