/* ============================================================
   finfoot.org shared rules: the logotype and the form controls,
   on top of the design-system tokens (/assets/ds/styles.css).
   Each page links this file with its own <link> after styles.css,
   never via @import, so it adds no step to the load chain.
   Size and spacing differ per page, so those stay on the page.
   Hiding rules (.hidden, the contact form's .hp honeypot) stay on
   the page too: they decide what a visitor can see or a bot can
   fill, so they must never depend on a second file arriving.
   ============================================================ */

/* The logotype (design-system readme § Logotype): Outfit ExtraBold, tight
   tracking, ligatures on (base.css), a Finfoot Coral dot before the word,
   sized in em from the 46 / 16 / 12 specimen, so each page sets only its
   font-size. The dot is aria-hidden, so the accessible name stays "finfoot",
   and it is decorative, so it is exempt from the contrast bars by the brand
   rule. inline-flex, not flex, so /auth/confirmed's centred text centres it
   too. font-family is needed for an <a> logotype; an h1 already has it. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.26em;               /* 12 / 46 in the specimen */
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.wordmark__dot {
  display: inline-block;
  flex: none;
  width: 0.35em;             /* 16 / 46 in the specimen */
  height: 0.35em;
  border-radius: var(--radius-pill);
  background: var(--finfoot-coral);
}

label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: var(--space-4) 0 var(--space-1);
}

input, textarea {
  width: 100%;
  padding: var(--space-3);
  font: inherit;
  color: var(--text-primary);
  background: var(--bg-raised);
  /* --border-strong against the 3:1 bar for non-text UI (WCAG 1.4.11), in
     both appearances (assets/theme.js sets dark from the device): on
     --bg-base, the page the input sits on, 6.89:1 light and 5.55:1 dark; on
     --bg-raised, its own fill, 7.35:1 light and 4.47:1 dark. */
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
}
input:focus, textarea:focus {
  outline: none;
  /* --focus-outline, not --accent, against the 3:1 bar: on the input's own
     fill (--bg-raised) 4.67:1 light and 4.57:1 dark, on the page (--bg-base)
     4.38:1 light and 5.68:1 dark. --accent is the same in light but 2.40:1
     and 2.99:1 in dark. */
  border-color: var(--focus-outline);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

button {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-5);
  font: inherit;
  font-weight: var(--fw-semibold);
  /* U7-c: --accent is static, so its label is static too. */
  color: var(--text-on-accent);
  background: var(--accent);
  border: 0;
  /* V2: things you press are rounded rectangles, not pills. */
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
/* --accent-hover is static in V2, like --accent, so its label is the static
   --text-on-accent: 5.82:1 on --accent-hover in both appearances. Never
   --accent-contrast here: it adapts, and its dark value on --accent-hover is
   2.68:1 (U13-AUTHHOVER1). */
button:hover:not(:disabled) { background: var(--accent-hover); color: var(--text-on-accent); }
/* The disabled opacity is set on each page, because the pages' values differ. */
button:disabled { cursor: default; }