/*
 * PRIMEX shared design tokens for static surfaces.
 *
 * Mirrors the in-app token set from src/lib/designTokens.js so static HTML
 * (landings, /grader, /try, /notes, /blog, /compare, /questions, success,
 * per-exam pages) shares the app's button/card/typography geometry instead
 * of each page rolling its own.
 *
 * Loaded by scripts/seo/inject-shared-styles.mjs — every dist/**.html gets
 * a <link rel="stylesheet" href="/pmx-tokens.css"> injected right before
 * </head> so this sheet wins over the page's inline <style> on equal
 * specificity (later-in-cascade rule).
 *
 * Audit: reports/UI_CONSISTENCY_AUDIT_2026-06-11.md
 */

:root {
  /* Brand palette — matches designTokens.js */
  --pmx-gold: #7e5a1f;
  --pmx-green: #4a7c59;
  --pmx-amber: #c97a1f;
  --pmx-red: #b6453a;

  /* Surfaces + ink */
  --pmx-bg: #f6f3ee;
  --pmx-surface: #f0ece5;
  --pmx-ink: #0c0f17;
  --pmx-ink-soft: #3a352f;
  --pmx-ink-muted: #544b40;
  --pmx-muted: #6a6158;

  /* Lines */
  --pmx-line: #d8d2c8;
  --pmx-line-soft: #e3ddd1;
  --pmx-line-strong: #cfc7b8;

  /* Radius scale */
  --pmx-radius-sm: 4px;
  --pmx-radius-md: 8px;
  --pmx-radius-lg: 12px;
  --pmx-radius-pill: 999px;

  /* Spacing scale (4px grid) */
  --pmx-space-1: 4px;
  --pmx-space-2: 8px;
  --pmx-space-3: 12px;
  --pmx-space-4: 16px;
  --pmx-space-5: 20px;
  --pmx-space-6: 24px;
  --pmx-space-7: 32px;
  --pmx-space-8: 48px;

  /* Touch target floor */
  --pmx-tap: 48px;

  /* Type stacks */
  --pmx-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pmx-font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --pmx-font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;

  /* Shadows */
  --pmx-shadow-card: 0 1px 0 rgba(40, 30, 10, 0.04), 0 4px 12px rgba(40, 30, 10, 0.05);
  --pmx-shadow-cta-hover: 0 4px 12px rgba(126, 90, 31, 0.25);
}

/* ── Utility classes — opt-in for new markup ───────────────────────── */

.pmx-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pmx-tap);
  padding: 12px 20px;
  background: var(--pmx-gold);
  color: #fff;
  font: 600 15px/1 var(--pmx-font-sans);
  letter-spacing: 0.02em;
  border: 0;
  border-radius: var(--pmx-radius-lg);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms, background 120ms;
}
.pmx-btn-primary:hover { box-shadow: var(--pmx-shadow-cta-hover); }
.pmx-btn-primary:active { transform: translateY(1px); }

.pmx-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pmx-tap);
  padding: 12px 18px;
  background: transparent;
  color: var(--pmx-ink);
  font: 500 14px/1 var(--pmx-font-sans);
  border: 1px solid var(--pmx-line);
  border-radius: var(--pmx-radius-lg);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.pmx-btn-secondary:hover { background: var(--pmx-surface); border-color: var(--pmx-line-strong); }

.pmx-card {
  background: var(--pmx-surface);
  border: 1px solid var(--pmx-line);
  border-radius: var(--pmx-radius-md);
  padding: var(--pmx-space-5);
}
.pmx-card-feature {
  border-radius: var(--pmx-radius-lg);
}

.pmx-eyebrow {
  font: 600 11px/1 var(--pmx-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pmx-ink-muted);
}

.pmx-h1 {
  font: 500 36px/1.15 var(--pmx-font-serif);
  color: var(--pmx-ink);
}
.pmx-h2 {
  font: 500 24px/1.25 var(--pmx-font-serif);
  color: var(--pmx-ink);
}

/* ── Compatibility layer — fixes the four geometry deltas without ───
 * requiring markup changes. These selectors match the legacy class
 * names used in landings, freemium pages, notes, blog, success and
 * the per-exam pages. Specificity (0,1,0) matches the originals; this
 * sheet wins via cascade order (injected just before </head>).
 *
 * Scope: only the universal properties (radius, font, min-height,
 * padding) — colours/borders are left alone so per-page accents don't
 * collapse to one look. The result is consistent shape + typography
 * across surfaces, while each page keeps its own visual nuance.
 */

.nav-cta,
.cta-btn,
.cta-block a.btn,
.lograder-open-btn {
  border-radius: var(--pmx-radius-lg);
  font-family: var(--pmx-font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  min-height: var(--pmx-tap);
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-btn-ghost {
  border-radius: var(--pmx-radius-lg);
  font-family: var(--pmx-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  min-height: var(--pmx-tap);
  padding: 12px 18px;
}

/* Card softening — the universal info/feature boxes that ship at 0–3px
 * across success, notes index, and per-exam pages. Round them to the
 * standard 8px so they read as siblings of in-app cards.
 */
.info-box,
.exam-card,
.station-card {
  border-radius: var(--pmx-radius-md);
}

/* ── A11y: focus-visible fallback ────────────────────────────────────
 * Audit (§9 Phase 2G) found per-exam landings + main index + /amc-cat
 * all declare focus rings that match the app (2px solid gold, 2px
 * offset). But /notes/* surfaces ship with no focus styling (browser
 * default), and /grader's textarea uses an inset -1px ring that breaks
 * the keyboard-nav affordance. Add a global fallback so any keyboard
 * user gets a consistent ring whatever the page.
 *
 * Per-page rules with equal specificity tie at (0,1,0); cascade order
 * means this sheet (linked last) wins, but per-page values are
 * identical (gold/2px/2px) so the effective result matches everywhere
 * except where there was no rule (notes) or an inset ring (grader
 * textarea) — those are the intended fixes.
 */
:focus-visible {
  outline: 2px solid var(--pmx-gold);
  outline-offset: 2px;
}

/* ── A11y: iOS zoom-prevention for form inputs ───────────────────────
 * Audit (§9 Phase 2I) found /try + /grader email forms ship 15px font
 * on inputs. iOS Safari + WKWebView auto-zoom on focus when the input
 * font-size is below 16px, which is jarring and breaks layout. The
 * in-app inputStyle deliberately uses 16px for this reason
 * (src/lib/styles.js:2 — "fontSize 16 prevents iOS Safari/WKWebView
 * from auto-zooming on focus").
 *
 * `max(16px, 1em)` floors at 16px while letting any input that's
 * intentionally larger keep its size (1em wins via max). Doesn't
 * touch input[type=hidden] or any non-form element. Affects 15px
 * email + 15px answer textarea cases; everything else passes through.
 */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  font-size: max(16px, 1em);
}

/* ── Brand text-selection colour ──────────────────────────────────────
 * The in-app `:root` declares `::selection { background: rgba(126,90,31,
 * 0.25); color: var(--pmx-ink); }` (designTokens.js). None of the ~450
 * static pages declare ::selection, so highlighting text on /grader vs
 * inside /app/ uses two different colours (gold tint in app, OS default
 * blue on static). Add the brand selection to every static page.
 *
 * 25% alpha = stays readable over coloured text; matches the in-app
 * value exactly.
 */
::selection {
  background: rgba(126, 90, 31, 0.25);
  color: var(--pmx-ink);
}