/*
 * name: Zoite Light
 * color-scheme: light
 */
:root{
  --body-bg:#eeeeee;
  --sidebar-left-bg:#133552;
  --sidebar-right-bg:#ffffff;

  --text-color:#333333;
  --link-color:#234562;
  --sidebar-right-text:#334155;
  --sidebar-left-text:#ffffff;

  --highlight-color-bg:#ffe9a8;

  --sidebar-left-border:1px solid #0e2a42;
  --sidebar-left-border-bottom:#0e2a42;
  --sidebar-left-frozen-color:#86a6c8;
  --sidebar-left-search-focus-bg:rgba(158,203,255,.15);
  --focus-outline:0 0 0 3px rgba(19,53,82,.25);

  --button-bg:#133552;
  --button-color:#ffffff;
  --button-border:1px solid #0f2e49;
  --button-danger-bg:#b91c1c;
  --button-disabled-bg:#d1e3f3;
  --button-disabled-border:1px solid #c7d9eb;
  --button-focus-outline:1px solid #0f2e49;
  --button-disabled-color:#4b5563;

  --hr-border:1px dashed #cbd5e1;
  --code-bg:#eef2f7;

  --input-focus-outline:1px solid #133552;
  --input-bg:#ffffff;
  --input-color:#1f2937;
  --input-border:1px solid #cbd5e1;
  --chat-input-bg:#ffffff;
  --input-disabled-bg:#f1f5f9;
  --input-disabled-color:#6b7280;
  --input-placeholder-color:#9ca3af;
  --input-focus-placeholder-color:#6b7280;

  --error-color:#ee2222;
  --success-color:#338833;
  --syntax-hl-base-bg:#fff;

  --autocomplete-bg:#ffffff;
  --autocomplete-border:1px solid #cbd5e1;
  --autocomplete-focus-bg:#e6f0fb;
}
/* header brand: replace label with boxed “Z” */
.AppHeader .navbar-brand,
.AppHeader .brand,
.navbar .navbar-brand {
  position: relative;
  display: inline-block;
  width: 42px;               /* box width */
  height: 42px;              /* box height */
  text-indent: -9999px;      /* keep link + a11y, hide text */
  overflow: hidden;
  white-space: nowrap;
}

/* draw the Zoite box */
.AppHeader .navbar-brand::before,
.AppHeader .brand::before,
.navbar .navbar-brand::before {
  content: "Z";
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #133552;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(50,50,50,.35);
  font-family: "Noticia Text", serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}

/* login / empty-state large mark (optional, looks like the site’s big logo) */
.AppLogin .logo,
.Login .logo {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 20px;
  background: #133552;
  box-shadow: 2px 2px 8px rgba(50,50,50,.35);
  position: relative;
}
.AppLogin .logo::before,
.Login .logo::before {
  content: "Z";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Noticia Text", serif;
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
}