/* web/styles.css — the public web surface (#988).
 *
 * RULE 14, CARVE-OUT (a). These pages are not in the designated mockup
 * generation, so no generation governs their layout — but the ratified tokens
 * still do: Public Sans (D8 / ADR-0015) and the ADR-0029 v3 orange system.
 * Every value below is copied from app/theme/tokens.ts, which is the single
 * source of truth; the names in the comments are its token paths.
 *
 * THE ORANGE RULE, APPLIED. Raw #FF6200 (orange[500]) ships only as the ADR-0029
 * ramp and never on anything label-carrying: at 3.0:1 on white it fails AA as
 * text. So every text-bearing role here is orange[700] #B84300 (5.47:1 on card,
 * 5.12:1 on canvas), and the focus ring is orange[600] #E85800 (3.60:1, the UI
 * element floor). #FF6200 appears once, as a large non-text accent bar, which is
 * the "large fills" role the ADR reserves it for.
 *
 * DARK MODE IS NOT OPTIONAL HERE. A store reviewer opens these on whatever their
 * phone is set to, so both schemes ship the ADR-0029 dark values (the brand
 * lightens on dark surfaces per Direction A convention: text.link #FF9D63).
 */

@font-face {
  font-family: 'Public Sans';
  /* Self-hosted, same origin. A privacy policy must not report its reader's IP
     to a font CDN in order to tell them we run no trackers. */
  src: url('/fonts/PublicSans-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Direction A light — surface / text / border / brand */
  --canvas: #faf7f2;      /* surface.canvas  paper[50]  */
  --card: #ffffff;        /* surface.card    paper[0]   */
  --text: #1a2742;        /* text.primary    ink[900]   */
  --secondary: #56627c;   /* text.secondary  grey[600]  */
  --muted: #6b7488;       /* text.muted      grey[500]  */
  --link: #b84300;        /* text.link       orange[700] */
  --hairline: #eae4d8;    /* border.hairline            */
  --focus: #e85800;       /* border.focus    orange[600] */
  --accent: #ff6200;      /* orange[500] — large non-text accent ONLY */

  /* typography.scale, in dp; 1rem = 16px so these are rem-converted */
  --body: 0.9375rem;      /* body 15/22    */
  --body-lg: 1.0625rem;   /* bodyLg 17/26  */
  --title: 1.25rem;       /* title 20/28   */
  --title-lg: 1.5rem;     /* titleLg 24/31 */
  --display: 2rem;        /* display 32/38 */
  --caption: 0.75rem;     /* caption 12/16 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0d1526;
    --card: #141f36;
    --text: #e8ecf5;
    --secondary: #a9b3c8;
    --muted: #8a93aa;
    --link: #ff9d63;      /* dark text.link — the brand lightens on dark */
    --hairline: #222f4c;
    --focus: #ff7a2e;     /* dark border.focus */
    --accent: #ff7a2e;    /* orange[400]: raw #FF6200 is too dim on a dark canvas */
  }
}

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

html {
  /* -apple-system etc. mirror typography.family.system.web so the page is
     readable in the moment before the variable font loads. */
  font-family: 'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--canvas);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: var(--body-lg);
  line-height: 1.6;
  /* Wide enough for a comfortable measure, narrow enough that a long policy
     paragraph does not run the full width of a desktop reviewer's monitor. */
  max-width: 44rem;
  margin-inline: auto;
  padding: 0 1.25rem 4rem;
}

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1.25rem;
  top: 0.5rem;
  z-index: 1;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  border: 2px solid var(--focus);
  border-radius: 0.375rem;
  color: var(--link);
}

/* ---------- header / nav ---------- */

header {
  padding-top: 2rem;
  border-bottom: 1px solid var(--hairline);
}

.wordmark {
  margin: 0;
  font-size: var(--title);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wordmark a {
  color: var(--text);
  text-decoration: none;
}

/* The one #FF6200 appearance: a 3px accent under the wordmark. Large, decorative
   and carries no label, which is the ADR-0029 role for the raw brand orange. */
.wordmark::after {
  content: '';
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--accent);
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 1rem 0 0.875rem;
  font-size: var(--body);
}

nav a {
  color: var(--link);
}

nav [aria-current='page'] {
  color: var(--text);
  font-weight: 600;
}

/* ---------- prose ---------- */

main {
  padding-top: 2rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: var(--display);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: var(--title-lg);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
}

.lede {
  color: var(--muted);
  font-size: var(--body);
  font-style: italic;
  margin-bottom: 2rem;
}

ol,
ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

strong {
  font-weight: 700;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ---------- footer ---------- */

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--secondary);
  font-size: var(--caption);
}

footer p {
  margin: 0 0 0.5rem;
}