/* =====================================================================
   app.css — tokens (--mp-*) e o "Bootstrap com a pele roxa".
   Vem do design-system/design-system.css (a página do DS mostra tudo
   funcionando). Carrega DEPOIS do Bootstrap. Se mudar um token, mude
   também no app.css da outra área e no design-system.css.

   Prefixo mp- só no que o Bootstrap não tem. Botão, campo, card e
   acordeão continuam Bootstrap, aqui só trocamos a cor e a forma.
   ===================================================================== */

:root {
  /* Marca. As quatro cores saem da logo, sem retoque.
     O roxo é a cor de ação no fundo claro: botão principal, link, foco.
     Se uma coisa é roxa e está num fundo claro, dá para tocar nela. */
  --mp-roxo: #5b57a2;
  --mp-roxo-escuro: #4a4690;    /* hover / pressionado */
  --mp-roxo-fundo: #efeef8;     /* item ativo, ícone de lista, foto escolhida */
  --mp-roxo-rgb: 91, 87, 162;

  /* Verde-água é o "PAPEL" da logo: destaque, nunca texto branco em cima
     (o contraste fica em 2,5 e não dá para ler). Em fundo noite ele vira
     a cor de ação, com texto tinta. */
  --mp-verde: #27b6b0;
  --mp-verde-escuro: #0e7f78;   /* verde para texto em fundo claro */
  --mp-verde-fundo: #e2f5f3;

  /* Laranja é a montanha da foto: calor, novidade, selo. Nunca botão. */
  --mp-laranja: #ed6e47;
  --mp-laranja-escuro: #b8462a; /* laranja para texto em fundo claro */
  --mp-laranja-fundo: #fdece5;

  /* Neutros puxados para o roxo e o papel, para não parecer cinza de sistema. */
  --mp-tinta: #1f1d3a;
  --mp-tinta-2: #3d3b58;
  --mp-apagado: #615f72;
  --mp-borda: #e4dfd6;
  --mp-borda-suave: #f0ece5;
  --mp-papel: #fbf8f3;          /* fundo de tudo: papel de foto, não branco de tela */
  --mp-superficie: #ffffff;
  --mp-noite: #211f3b;          /* seção escura do site, sidebar do adm. Nunca preto puro. */
  --mp-noite-2: #2d2a4f;
  --mp-noite-texto: #b9b6d6;

  /* Situação. Só dizem o estado de algo, nunca são botão
     (a exceção é o vermelho de excluir). */
  --mp-ok: #1f7a4d;       --mp-ok-fundo: #e3f3ea;
  --mp-ambar: #93650f;    --mp-ambar-fundo: #fcf0d6;
  --mp-vermelho: #b3382c; --mp-vermelho-fundo: #fbe8e5;
  --mp-cinza: #615f72;    --mp-cinza-fundo: #efedf0;

  /* Montserrat é a parente gratuita da Gotham da logo. Mulish no texto
     corrido: já era a letra do site, lê bem pequena. */
  --mp-fonte-titulo: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --mp-fonte: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Letra de caneta: só no que seria escrito à mão no papel (legenda de
     foto, recado, post-it, dica). Nunca em botão, menu, preço ou título. */
  --mp-caneta: 'Caveat', 'Segoe Print', cursive;

  --mp-raio-foto: 4px;      /* foto impressa: quase quadrada, como papel */
  --mp-raio-btn: 12px;      /* botão, campo */
  --mp-raio: 16px;          /* card, plano, lista */
  --mp-raio-bloco: 28px;    /* bloco grande do site, sheet */
  --mp-raio-pilula: 999px;  /* chip, selo, alternador */

  --mp-sombra-1: 0 1px 2px rgba(31, 29, 58, .06), 0 1px 1px rgba(31, 29, 58, .04);
  --mp-sombra-2: 0 8px 20px rgba(31, 29, 58, .08), 0 2px 4px rgba(31, 29, 58, .04);
  --mp-sombra-3: 0 20px 48px rgba(31, 29, 58, .18), 0 4px 10px rgba(31, 29, 58, .06);
  --mp-sombra-foto: 0 2px 3px rgba(31, 29, 58, .12), 0 10px 24px rgba(31, 29, 58, .14);

  --mp-toque: 44px;         /* menor alvo de dedo permitido */

  /* Bootstrap lê estas variáveis: é assim que ele fica roxo sem Sass. */
  --bs-primary: #5b57a2;
  --bs-primary-rgb: 91, 87, 162;
  --bs-link-color: #5b57a2;
  --bs-link-color-rgb: 91, 87, 162;
  --bs-link-hover-color: #4a4690;
  --bs-link-hover-color-rgb: 74, 70, 144;
  --bs-body-font-family: var(--mp-fonte);
  --bs-body-color: var(--mp-tinta);
  --bs-body-bg: var(--mp-papel);
  --bs-secondary-color: var(--mp-apagado);
  --bs-border-color: var(--mp-borda);
  --bs-border-radius: var(--mp-raio-btn);
  --bs-border-radius-lg: var(--mp-raio);
  --bs-focus-ring-color: rgba(91, 87, 162, .25);

  /* Campo com problema: o vermelho da casa, não o do Bootstrap. */
  --bs-danger: #b3382c;
  --bs-danger-rgb: 179, 56, 44;
  --bs-form-invalid-color: #b3382c;
  --bs-form-invalid-border-color: #b3382c;
}

body {
  font-family: var(--mp-fonte);
  color: var(--mp-tinta);
  background: var(--mp-papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mp-fonte-titulo);
  font-weight: 700;
  color: var(--mp-tinta);
  text-wrap: balance;
}

/* Título de vitrine: fino e grosso juntos, como o "NO" fino entre
   "MEMÓRIAS" e "PAPEL" da logo. A palavra grossa é a que importa. */
.mp-vitrine {
  font-family: var(--mp-fonte-titulo);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.04;
}

.mp-vitrine strong { font-weight: 800; }
.mp-vitrine .mp-roxo { color: var(--mp-roxo); }
.mp-vitrine .mp-verde { color: var(--mp-verde); }

/* Olho: a linha pequena em cima do título de seção. */
.mp-olho {
  font-family: var(--mp-fonte-titulo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mp-verde-escuro);
}

.mp-numero { font-variant-numeric: tabular-nums; }

/* Bootstrap com a pele roxa ------------------------------------------
   No 5.3 o .btn-primary tem a cor dele "assada" em variáveis próprias;
   mudar só o --bs-primary não basta, por isso cada botão é refeito aqui. */

.btn {
  --bs-btn-font-family: var(--mp-fonte-titulo);
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: .95rem;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: .6rem;
  --bs-btn-border-radius: var(--mp-raio-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--mp-toque);
}

.btn-lg {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .85rem;
  --bs-btn-font-size: 1.02rem;
  --bs-btn-border-radius: 14px;
  min-height: 52px;
}

.btn-sm {
  --bs-btn-padding-x: .75rem;
  --bs-btn-padding-y: .35rem;
  --bs-btn-font-size: .85rem;
  --bs-btn-border-radius: 10px;
  min-height: 34px;
}

.btn-primary {
  --bs-btn-bg: var(--mp-roxo);
  --bs-btn-border-color: var(--mp-roxo);
  --bs-btn-hover-bg: var(--mp-roxo-escuro);
  --bs-btn-hover-border-color: var(--mp-roxo-escuro);
  --bs-btn-active-bg: var(--mp-roxo-escuro);
  --bs-btn-active-border-color: var(--mp-roxo-escuro);
  --bs-btn-disabled-bg: var(--mp-roxo);
  --bs-btn-disabled-border-color: var(--mp-roxo);
  --bs-btn-focus-shadow-rgb: var(--mp-roxo-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--mp-roxo);
  --bs-btn-border-color: var(--mp-roxo);
  --bs-btn-hover-bg: var(--mp-roxo);
  --bs-btn-hover-border-color: var(--mp-roxo);
  --bs-btn-active-bg: var(--mp-roxo-escuro);
  --bs-btn-active-border-color: var(--mp-roxo-escuro);
  --bs-btn-focus-shadow-rgb: var(--mp-roxo-rgb);
}

/* Botão secundário: fundo roxo bem claro em vez de contorno, pesa menos
   ao lado do roxo. */
.btn-light {
  --bs-btn-color: var(--mp-roxo-escuro);
  --bs-btn-bg: var(--mp-roxo-fundo);
  --bs-btn-border-color: var(--mp-roxo-fundo);
  --bs-btn-hover-color: var(--mp-roxo-escuro);
  --bs-btn-hover-bg: #e3e1f2;
  --bs-btn-hover-border-color: #e3e1f2;
  --bs-btn-active-bg: #d8d6ec;
  --bs-btn-active-border-color: #d8d6ec;
}

.btn-outline-danger {
  --bs-btn-color: var(--mp-vermelho);
  --bs-btn-border-color: #f0c5bf;
  --bs-btn-hover-bg: var(--mp-vermelho);
  --bs-btn-hover-border-color: var(--mp-vermelho);
}

.btn-link {
  --bs-btn-font-weight: 700;
  text-decoration: none;
}

/* A ação em fundo noite. Verde-água com texto tinta: o roxo some no escuro
   e o branco some no verde. Só existe dentro de .mp-noite. */
.mp-btn-verde {
  --bs-btn-color: var(--mp-tinta);
  --bs-btn-bg: var(--mp-verde);
  --bs-btn-border-color: var(--mp-verde);
  --bs-btn-hover-color: var(--mp-tinta);
  --bs-btn-hover-bg: #4cc7c1;
  --bs-btn-hover-border-color: #4cc7c1;
  --bs-btn-active-color: var(--mp-tinta);
  --bs-btn-active-bg: #4cc7c1;
  --bs-btn-active-border-color: #4cc7c1;
  --bs-btn-disabled-color: var(--mp-noite-texto);
  --bs-btn-disabled-bg: rgba(255, 255, 255, .1);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: 1;
  --bs-btn-focus-shadow-rgb: 39, 182, 176;
}

/* O secundário em fundo noite: contorno claro. */
.mp-btn-contorno-claro {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .35);
  --bs-btn-hover-color: var(--mp-tinta);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--mp-tinta);
  --bs-btn-active-bg: #fff;
}

.form-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--mp-tinta-2);
  margin-bottom: .35rem;
}

.form-control,
.form-select {
  min-height: var(--mp-toque);
  padding: .6rem .9rem;
  border-color: var(--mp-borda);
  border-radius: var(--mp-raio-btn);
  background-color: var(--mp-superficie);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--mp-roxo);
  box-shadow: 0 0 0 4px rgba(var(--mp-roxo-rgb), .16);
}

.form-control::placeholder { color: #9a98a8; }

.form-check-input:checked {
  background-color: var(--mp-roxo);
  border-color: var(--mp-roxo);
}

.form-check-input:focus {
  border-color: var(--mp-roxo);
  box-shadow: 0 0 0 4px rgba(var(--mp-roxo-rgb), .16);
}

.form-text { color: var(--mp-apagado); }

.card {
  --bs-card-border-color: var(--mp-borda);
  --bs-card-border-radius: var(--mp-raio);
  --bs-card-inner-border-radius: calc(var(--mp-raio) - 1px);
  box-shadow: var(--mp-sombra-1);
}

/* Acordeão (dúvidas): cartões soltos em vez de uma caixa só. */
.accordion {
  --bs-accordion-border-color: var(--mp-borda);
  --bs-accordion-border-radius: var(--mp-raio);
  --bs-accordion-inner-border-radius: calc(var(--mp-raio) - 1px);
  --bs-accordion-btn-padding-y: 1.1rem;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(var(--mp-roxo-rgb), .16);
  --bs-accordion-active-color: var(--mp-roxo-escuro);
  --bs-accordion-active-bg: var(--mp-superficie);
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b57a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.accordion-item {
  margin-bottom: 10px;
  border: 1px solid var(--mp-borda) !important;
  border-radius: var(--mp-raio) !important;
  overflow: hidden;
}

.accordion-button {
  font-family: var(--mp-fonte-titulo);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--mp-tinta);
}

.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-body { padding-top: 0; color: var(--mp-tinta-2); }