/* ============================================================
   TWIC Host Organisation Registration — design tokens & base
   ============================================================ */

:root {
  /* Type families (overridable via Tweaks) */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  /* ---- TWIC brand palette (sampled from 2026 prospectus) ----
     black + white · electric lime #a5ff00 · deep teal #007f73
     soft pops: pink #ffbffe, mint #7df8f0 · darks #183a43 / #1c334e */
  --paper: #fbfdfc;
  --paper-2: #eef4f2;
  --card: #ffffff;
  --ink: #122a2c;          /* deep teal-black */
  --ink-soft: #496765;
  --ink-faint: #7c9492;
  --line: #dde8e5;
  --line-strong: #c2d3cf;

  /* Workhorse accent = teal; pops = lime */
  --accent: #007f73;
  --accent-strong: #006a60;
  --on-accent: #ffffff;
  --accent-tint: rgba(0, 127, 115, 0.11);

  --hi: #a5ff00;           /* electric lime — used sparingly */
  --on-hi: #122a2c;
  --tick: #ffffff;         /* checkmark colour on teal */

  --pink: #ffbffe;
  --mint: #7df8f0;

  /* Hero pairing — pink & teal are the two dominant brand colours.
     Default: pink background, teal H1. [data-hero="teal"] swaps them. */
  --hero-bg: #ffbffe;
  --hero-fg: #00665c;
  --hero-lede: #2a4f4c;
  --hero-cta-bg: #007f73;
  --hero-cta-fg: #ffffff;

  /* Status */
  --error: oklch(0.55 0.20 28);
  --error-tint: oklch(0.55 0.20 28 / 0.10);
  --ok: #007f73;

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-sm: 0 1px 2px oklch(0.18 0.012 70 / 0.06), 0 2px 8px oklch(0.18 0.012 70 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.18 0.012 70 / 0.08), 0 18px 40px oklch(0.18 0.012 70 / 0.07);
  --maxw: 760px;
}

/* ---- Hero pairing (Tweaks → data-hero on :root) ---- */
/* pink: soft pink background, deep teal headline (default) */
[data-hero="pink"] {
  --hero-bg: #ffbffe; --hero-fg: #00665c; --hero-lede: #2a4f4c;
  --hero-cta-bg: #007f73; --hero-cta-fg: #ffffff;
}
/* teal: deep teal background, pink headline */
[data-hero="teal"] {
  --hero-bg: #007f73; --hero-fg: #ffc9fe; --hero-lede: rgba(255,255,255,0.86);
  --hero-cta-bg: #ffbffe; --hero-cta-fg: #122a2c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { min-height: 100vh; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--accent); color: #ffffff; }

/* Display type helpers */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-stretch: 125%;
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* Scrollbar polish */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* Turnstile bot-check on the submit step */
.turnstile-box {
  display: flex;
  justify-content: center;
  padding: 10px 16px 0;
}

/* Partnership footer */
.sitefooter {
  text-align: center;
  padding: 18px 16px 22px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.sitefooter a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sitefooter a:hover { color: var(--accent); }

/* Entrance: content is ALWAYS visible (opacity:1). We only animate a small
   translate via a JS-added .ready class. Transitions freeze in background tabs,
   so we never gate visibility on them — a frozen state just shows content in place. */
.anim-rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.ready) .anim-rise { transform: translateY(16px); }
  .anim-rise { transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
}