/* SchoolOpsPro v2 — the shared palette for the standalone static pages.
 *
 * public/pricing.html, faq.html, support.html, terms.html, privacy.html and refund.html are hand-written
 * documents, so they cannot see src/styles/tokens.css — that file is bundled into the app's CSS and never
 * reaches these pages. Each of them used to carry its own copy of the palette, and the copies had drifted
 * from each other AND from the app: three different inks, two different rule colours, and the same grey
 * under two names (--muted here, --ink-2 there). This file is that palette, once.
 *
 * The values are the app's real ones, copied from src/styles/tokens.css. If a value changes there it has
 * to change here too — a static page that is subtly a different colour from the app it belongs to reads
 * as a different product.
 *
 * Linked from every static page BEFORE its own <style>, so a page can still override what it needs.
 * Colours only one page uses (ochre, brick, focus, the pine tints, --ink-3) stay in that page.
 */
:root {
  --paper-bg: #fbf9f4; /* page background */
  --surface: #ffffff; /* cards, panels */
  --ink: #1b1a17; /* primary text */
  --ink-2: #5a544b; /* secondary text (spelled --muted on three of these pages before) */
  --rule: #d3cfc4; /* decorative rules, card and table borders */
  --line: #e4ddce; /* the lightest divider — decorative only, never a control boundary */
  --pine: #1f5c4a; /* the one accent */

  /* CONTROL boundaries. --line is 1.35:1 on --surface and 1.28:1 on --paper-bg, which is no perceivable
   * edge at all (WCAG 1.4.11 AA wants 3:1 for a control's boundary); this is the app's token for a
   * control edge and measures 3.79:1 on --surface and 3.60:1 on --paper-bg. */
  --line-strong: #8f8264;
}

/* Skip link for the static pages. They do not load the app's base.css, so the one control that must
 * exist on every page lives here too. Off-screen until focused, then it lands over the header. Not
 * display:none — a display:none link cannot be focused, which is the whole point of it. */
.skip-link {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--ink);
  color: var(--paper-bg);
  /* Literals, not var(): this file is the palette only — it declares no spacing, radius or type
   * ramp, and an undeclared var() invalidates the whole declaration (which is how the app ended up
   * with ten invisible borders). Each value below is the app token named beside it. */
  padding: 12px 16px; /* = --s3 / --s4 */
  border-radius: 0 0 8px 8px; /* = --r-sm */
  font-size: 13px; /* = --t-sm */
  font-weight: 600;
  transition: top 0.16s ease;
}
.skip-link:focus {
  top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}