:root {
  --palette-blue-soft: #8FA8D9;
  --palette-blue: #5A86BF;
  --palette-green-deep: #5C8C3A;
  --palette-green: #88BF50;
  --palette-canvas: #F2F2F2;
}

@font-face {
  font-family: "Jura";
  src: url("fonts/Jura-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

body {
  background: var(--palette-canvas);
}

body > aside {
  background: linear-gradient(165deg, #5C8C3A 0%, #456F2C 100%);
  box-shadow: 10px 0 34px rgba(92, 140, 58, .16);
}

.brand-area {
  border-bottom-color: rgba(255, 255, 255, .18);
}

.brand span,
.logo {
  background: var(--green2);
  color: #203514;
}

.brand-area > small,
.nav-heading {
  color: #DDEBCF;
}

nav a {
  color: #F4F8F0;
}

nav a:hover {
  background: rgba(143, 168, 217, .24);
}

.logout {
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}

main.public {
  background:
    radial-gradient(circle at 15% 10%, rgba(143, 168, 217, .45), transparent 34%),
    radial-gradient(circle at 88% 84%, rgba(136, 191, 80, .28), transparent 28%),
    var(--palette-canvas);
}

.panel,
.stats article,
.login-card,
.template-card {
  border-color: rgba(90, 134, 191, .22);
  box-shadow: 0 8px 30px rgba(66, 91, 120, .07);
}

button,
.button {
  background: var(--green);
}

button:hover,
.button:hover {
  filter: brightness(.9);
}

.secondary {
  background: rgba(143, 168, 217, .22);
  color: #365E91;
}

input:focus,
select:focus,
textarea:focus {
  outline-color: rgba(143, 168, 217, .55);
  border-color: var(--green);
}

.badge,
.flash.success {
  background: rgba(136, 191, 80, .2);
  color: #426D26;
}

.menu-row.child,
th {
  background: rgba(143, 168, 217, .08);
}

.brand-preview {
  background: linear-gradient(145deg, #5C8C3A, #3F6728);
}

/* Portal do cliente: azul e verde invertidos, conforme identidade definida. */
body:not(.platform) {
  background: #DADBD7;
  --green: #88BF50 !important;
  --green2: #5A86BF !important;
  font-family: "Jura", "Segoe UI", sans-serif;
  font-weight: 500;
}

body:not(.platform) > aside {
  background: linear-gradient(165deg, #5A86BF 0%, #466FA6 100%);
  box-shadow: 10px 0 34px rgba(90, 134, 191, .18);
}

body:not(.platform) .client-logo,
body:not(.platform) .brand img {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

body:not(.platform) .brand-area > small,
body:not(.platform) .nav-heading {
  color: #E3ECF8;
}

body:not(.platform) nav a:hover {
  background: rgba(136, 191, 80, .28);
}

body:not(.platform) main.public {
  background:
    radial-gradient(circle at 15% 10%, rgba(136, 191, 80, .30), transparent 34%),
    radial-gradient(circle at 88% 84%, rgba(143, 168, 217, .34), transparent 28%),
    #DADBD7;
}

body:not(.platform) button,
body:not(.platform) .button {
  background: #88BF50;
  color: #203514;
  font-family: "Jura", "Segoe UI", sans-serif;
  font-weight: 700;
}

body:not(.platform) .secondary {
  background: rgba(136, 191, 80, .24);
  color: #3E6824;
  font-weight: 700;
}

body:not(.platform) h1,
body:not(.platform) h2,
body:not(.platform) h3,
body:not(.platform) strong,
body:not(.platform) b,
body:not(.platform) .form-divider,
body:not(.platform) .promo {
  font-weight: 700;
}

body:not(.platform) input:focus,
body:not(.platform) select:focus,
body:not(.platform) textarea:focus {
  outline-color: rgba(136, 191, 80, .52);
  border-color: #5C8C3A;
}

body:not(.platform) .badge,
body:not(.platform) .flash.success {
  background: rgba(143, 168, 217, .25);
  color: #365E91;
}

body:not(.platform) .menu-row.child,
body:not(.platform) th {
  background: rgba(136, 191, 80, .10);
}