/*
 * Superfície de marca Farmtec: o verde da plataforma por cima da textura oficial
 * (Texturas/PNG/Padrão 1). Três intensidades; use no máximo uma ou duas por tela —
 * o menu lateral e um card de destaque. Importe depois de ui.css.
 *
 * O caminho supõe este arquivo em src/styles/ e a textura em src/assets/brand/.
 */
:root {
  --ft-textura: url("../brand/textura.png");
}

.ft-surface {
  --ft-veu: linear-gradient(120deg, rgba(3, 78, 62, 0.94) 0%, rgba(7, 54, 44, 0.9) 60%, rgba(7, 54, 44, 0.8) 100%);
  position: relative;
  overflow: hidden;
  background: var(--ft-veu), var(--ft-textura) center / cover;
  color: var(--text-on-dark);
}

/* Forte — menu lateral e navegação: a textura fica só sugerida para o texto ler bem. */
.ft-surface--forte {
  --ft-veu: linear-gradient(180deg, rgba(7, 54, 44, 0.9) 0%, rgba(7, 54, 44, 0.97) 55%, #062d25 100%);
  background-size: auto, 900px auto;
}

/* Média — card de destaque no topo da página (boas-vindas, resumo). */
.ft-surface--media {
  --ft-veu: linear-gradient(120deg, rgba(3, 78, 62, 0.94) 0%, rgba(7, 54, 44, 0.9) 60%, rgba(7, 54, 44, 0.8) 100%);
}

/* Suave — login e telas de entrada: a textura aparece mais. */
.ft-surface--suave {
  --ft-veu: linear-gradient(135deg, rgba(7, 54, 44, 0.55) 0%, rgba(7, 54, 44, 0.9) 70%);
}

/* Conteúdo por cima do verde: textos claros, sobrelinha laranja e botões que aparecem no escuro. */
.ft-surface :where(h1, h2, h3, h4, strong) {
  color: var(--text-on-dark);
}

.ft-surface :where(p, small) {
  color: var(--text-on-dark-muted);
}

.ft-surface .eyebrow {
  color: var(--ft-laranja);
}

.ft-surface .btn--primary {
  background: var(--ft-verde-claro);
}

.ft-surface .btn--primary:hover:not(:disabled) {
  background: #13b873;
}

.ft-surface .btn--secondary,
.ft-surface .btn--ghost {
  border-color: rgba(251, 251, 251, 0.28);
  background: rgba(251, 251, 251, 0.08);
  color: var(--text-on-dark);
}

.ft-surface .btn--secondary:hover:not(:disabled),
.ft-surface .btn--ghost:hover:not(:disabled) {
  border-color: rgba(251, 251, 251, 0.5);
  background: rgba(251, 251, 251, 0.14);
  color: #fff;
}

/* Grafismo oficial como canto decorativo (login, destaque grande). */
.ft-grafismo {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 220px;
  opacity: 0.55;
  filter: brightness(1.6);
  pointer-events: none;
}