/*
 * Fig — the public site.
 *
 * COLOURS ARE THE PRODUCT'S OWN, NOT A WEBSITE PALETTE. Every value below is lifted from
 * `fig-mobile/src/theme/brand.ts`, which carries its measured contrast ratio in a comment beside
 * each token because several of them were fixed after a real WCAG failure. Inventing a second
 * palette for the website would mean inventing a second set of unaudited colours, and it would
 * also mean the first thing somebody sees looks like a different product from the one they
 * install.
 *
 * Light is the default and dark follows the reader's setting. No toggle: a four-page site that
 * asks you to pick a theme is asking you to do work for it.
 */

:root {
  --ground: #FAF7F2;
  --card: #FFFFFF;
  --line: #EFE9DE;
  --title: #2A1C2B;   /* 16.2:1 on card */
  --muted: #6E665C;   /* 5.6:1 on card, 5.2:1 on ground */
  --action: #3E6657;  /* 6.5:1 on card */
  --fill: #233831;    /* white on it: 12.5:1 */
  --onFill: #FFFFFF;
  --tint: #E3EDE8;
  --tintInk: #3E6657;
  --shadow: rgba(66, 45, 49, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #17121A;
    --card: #221A26;
    --line: #332838;
    --title: #F6F1F4;   /* 15.1:1 on card */
    --muted: #B3A7B4;   /* 7.3:1 on card */
    --action: #8FC9B0;  /* 9.0:1 on card */
    --fill: #DCEDE3;
    --onFill: #17281F;
    --tint: #22362E;
    --tintInk: #8FC9B0;
    --shadow: rgba(0, 0, 0, 0.45);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--title);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  /* NO FIXED PX SIZE ON BODY, and the `font:` shorthand that used to be here carried one (17px).
     It was immediately overridden by the line below, so it behaved correctly — but a literal size
     sitting in a token file is exactly the thing `quality-gate.py` flags and exactly the pattern
     that bakes a failure into everything that inherits from it. `1rem` is the reader's own
     setting; a support page is disproportionately read by people who have turned it up. */
  font-size: clamp(1rem, 1rem + 0.15vw, 1.125rem);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }

/* ── header ────────────────────────────────────────────────────────────────────────────── */

header { border-bottom: 1px solid var(--line); }

.bar {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 4rem; flex-wrap: wrap;
}

.mark {
  font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em;
  color: var(--title); text-decoration: none;
}

nav { display: flex; gap: 1.25rem; margin-left: auto; flex-wrap: wrap; }

nav a {
  color: var(--muted); text-decoration: none; font-size: 0.95rem;
  /* 44px minimum touch target, met with padding rather than a height that would push the
     baseline off the mark. */
  padding: 0.7rem 0; display: inline-block;
}
nav a:hover, nav a:focus-visible { color: var(--title); }
nav a[aria-current="page"] { color: var(--title); font-weight: 600; }

/* ── type ──────────────────────────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  line-height: 1.15; letter-spacing: -0.02em; margin: 2.5rem 0 0.75rem;
}

h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  line-height: 1.3; margin: 2.5rem 0 0.5rem; letter-spacing: -0.01em;
}

h3 { font-size: 1.05rem; margin: 1.75rem 0 0.35rem; }

p, li { color: var(--title); }
.lead { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.5rem; }
.muted { color: var(--muted); }

ul { padding-left: 1.2rem; }
li { margin: 0.4rem 0; }

a { color: var(--action); text-underline-offset: 0.2em; }

/* ── pieces ────────────────────────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin: 1rem 0;
}

.stamp {
  display: inline-block; background: var(--tint); color: var(--tintInk);
  border-radius: 999px; padding: 0.25rem 0.7rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
}

dl.qa { margin: 0; }
dl.qa dt { font-weight: 650; margin: 1.5rem 0 0.3rem; }
dl.qa dd { margin: 0; color: var(--muted); }
dl.qa dd p { color: var(--muted); margin: 0.4rem 0; }

footer {
  border-top: 1px solid var(--line);
  margin-top: 4rem; padding: 2rem 0 3rem;
  color: var(--muted); font-size: 0.9rem;
}
footer a { color: var(--muted); }
footer .links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

/* Focus that is actually visible, in both themes. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--action); outline-offset: 3px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}