/* Painel de conteúdos com as cores da Elcasys.
   O Wagtail deriva os tons a partir de matiz/saturação/luminosidade, então aqui vão os valores
   das cores da marca (brand/tokens.css) convertidos para HSL:
   - primária (menu lateral) = --fundo-elevado #0a1033
   - secundária (botões, links) = roxo com contraste para texto pequeno (#8e00c8, o --roxo-texto do tema claro)
   - foco = --ciano #00e5f8 */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap");

:root {
  --w-color-primary-hue: 231;
  --w-color-primary-saturation: 67%;
  --w-color-primary-lightness: 12%;
  --w-color-secondary-hue: 283;
  --w-color-secondary-saturation: 100%;
  --w-color-secondary-lightness: 39%;
  --w-color-focus: #00e5f8;
}

/* Modo escuro com os tons da marca no lugar dos cinzas do Wagtail.
   --fundo #02030f, --fundo-elevado #0a1033, --linha #1c2350. As bordas de campo ficam as do Wagtail (contraste). */
.w-theme-dark {
  --w-color-surface-page: #02030f;
  --w-color-surface-header: #0a1033;
  --w-color-surface-menus: #0a1033;
  --w-color-surface-menu-item-active: #1c2350;
  --w-color-surface-field: #0a1033;
  --w-color-surface-field-inactive: #0a1033;
  --w-color-surface-dashboard-panel: #0a1033;
  --w-color-surface-tooltip: #1c2350;
  --w-color-surface-button-outline-hover: #1c2350;
  --w-color-surface-status-label: #1c2350;
  --w-color-border-furniture: #1c2350;
}
@media (prefers-color-scheme: dark) {
  .w-theme-system {
    --w-color-surface-page: #02030f;
    --w-color-surface-header: #0a1033;
    --w-color-surface-menus: #0a1033;
    --w-color-surface-menu-item-active: #1c2350;
    --w-color-surface-field: #0a1033;
    --w-color-surface-field-inactive: #0a1033;
    --w-color-surface-dashboard-panel: #0a1033;
    --w-color-surface-tooltip: #1c2350;
    --w-color-surface-button-outline-hover: #1c2350;
    --w-color-surface-status-label: #1c2350;
    --w-color-border-furniture: #1c2350;
  }
}

body, .w-panel__heading, .w-header__title, .sidebar, input, textarea, select, button {
  font-family: "Outfit", "Montserrat", system-ui, sans-serif;
}
.w-header__title, .w-panel__heading { font-weight: 800; letter-spacing: -0.01em; }

/* tela de login: fundo azul-noite com halo (como o site) e o logo no topo do cartão */
body.login {
  background: radial-gradient(ellipse 80% 60% at 80% 0%, #00197a, transparent 70%), #02030f; /* --azul-marinho, --fundo */
}
body.login .content-wrapper {
  display: flex; flex-direction: column;
  background: #0a1033; /* --fundo-elevado */
  border: 1px solid #1c2350; /* --linha */
  color: #ffffff;
}
body.login .content-wrapper h1 { color: #ffffff; }
.elcasys-login-logo { order: -1; margin-bottom: 1.5rem; }
.elcasys-login-logo img { width: 100%; max-width: 360px; height: auto; margin: 0 auto; display: block; }

/* tela "Compartilhar no LinkedIn" */
.elcasys-linkedin { display: grid; gap: 2rem; max-width: 60rem; }
@media (min-width: 900px) { .elcasys-linkedin { grid-template-columns: 1fr 1fr; align-items: start; } }
.elcasys-linkedin__card { border: 1px solid var(--w-color-border-furniture); border-radius: 10px; overflow: hidden; }
.elcasys-linkedin__card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: #02030f; }
.elcasys-linkedin__card div { padding: .75rem 1rem; }
.elcasys-linkedin__card strong { display: block; }
.elcasys-linkedin__card small { color: var(--w-color-text-meta); }
.elcasys-linkedin textarea { width: 100%; min-height: 14rem; font-family: inherit; }
.elcasys-linkedin ol { padding-left: 1.25rem; line-height: 1.7; }
.elcasys-linkedin .acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.elcasys-linkedin .help-block { color: var(--w-color-text-meta); }