/* ============================================================
   Fieldnotes — mærkelaget

   Ét sted for de flader, hvor Fieldnotes præsenterer sig selv:
   forsiden, log ind, invitationer og kvitteringer. Her ligger
   logoet, kortet med højdekurver, pille-knappen og fluebenet.

   Hver side har stadig sin egen CSS til layout — det er kun
   mærket, der er fælles, så en ændring af det grønne forløb
   eller logoet slår igennem alle steder på én gang.

   Bruges IKKE på de kundevendte sider (kunde.html, tilbud.html,
   besigtigelse.html): dér står KUNDENS eget firmanavn og logo i
   toppen, og deres knapper er tunet til WCAG AA i både lys og
   mørk tilstand (se kunde-ui.css). Fieldnotes' mærke hører ikke
   hjemme oven i en anden virksomheds dokument.

   Heller ikke på arbejdsknapperne inde i appen ("Gem", "Opret
   kunde"): pille-knappen med forløb og skygge er til det ene
   store valg på en side, ikke til en værktøjslinje.
   ============================================================ */

:root {
  --brand-green: #35c06e;
  --brand-green-deep: #177f40;
  --brand-ink: #1f2937;
  /* ÉT forløb til alle knapper i hele Fieldnotes — app, forside og
     kundevendte sider. Det er mørkere end mærkets lyse grønne med vilje:
     hvid tekst måler 5,5:1 hvor teksten står, og består dermed WCAG AA.
     De lyse #35c06e ville lande på ca. 3,3:1. Rettes farven her, skal den
     kontrol laves om igen. */
  --brand-grad: linear-gradient(180deg, #1a8a49, #12673a);
  /* Tekstforløbet er logoets egen farve og må gerne være lyst — ordmærker
     er undtaget kontrastkravet (WCAG 1.4.3). Lodret på flader, vandret på
     tekst, ellers skifter ordmærket farve midt i ordet. */
  --brand-grad-text: linear-gradient(90deg, var(--brand-green), var(--brand-green-deep));
  --brand-shadow: 0 18px 48px rgba(16, 24, 40, 0.18);
}

/* ---------- Logo ---------- */

.brand-lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  background: url("/logo-mark.svg") center / contain no-repeat;
}
.brand-wordmark {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--brand-ink);
  white-space: nowrap;
}
/* "notes" i forløb. Egen klasse frem for .logo-accent, så den også
   virker på siderne uden appens style.css. */
.brand-accent {
  background: var(--brand-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Kort med højdekurver ---------- */

.brand-card {
  background-color: #fff;
  background-image: url("/topo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: var(--brand-shadow);
}

/* ---------- Pille-knap ---------- */

.brand-btn {
  display: inline-block;
  padding: 15px 28px;
  border: none;
  border-radius: 999px;
  background: var(--brand-grad);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(30, 158, 80, 0.28);
  transition: filter 0.2s;
}
/* Lysstyrke frem for en ny baggrundsfarve — ellers forsvinder forløbet. */
.brand-btn:hover { filter: brightness(0.95); }
.brand-btn:disabled { background: #9ca3af; box-shadow: none; filter: none; cursor: not-allowed; }
.brand-btn.block { display: block; width: 100%; }
/* Den stilfærdige nabo: samme form, ingen vægt. */
.brand-btn.quiet {
  background: none;
  color: #6b7280;
  border: 1.5px solid transparent;
  box-shadow: none;
  font-weight: 600;
}
.brand-btn.quiet:hover { border-color: #d1d5db; color: var(--brand-ink); filter: none; }

/* ---------- Kvitteringsflueben ---------- */

.brand-check {
  width: 92px;
  height: 92px;
  margin: 4px auto 16px;
  background: url("/check-circle.svg") center / contain no-repeat;
  /* Skæret bag fluebenet. drop-shadow følger stregen, ikke kassen. */
  filter: drop-shadow(0 0 14px rgba(53, 192, 110, 0.45));
}