/*
 * @harpcrate/web-core — PLAIN-CSS tokens for non-Tailwind (static) consumers.
 *
 * theme.css is Tailwind v4 `@theme` syntax: it only becomes real `:root`
 * custom properties once Tailwind compiles it. The static sites that have no
 * Tailwind build — rankings (Python/Jinja) and homepage — need those variables
 * as plain CSS they can `<link>` directly. This file is that: the compiled
 * equivalent of theme.css + the wordmark/alias bridge from base.css.
 *
 * ⚠️ Keep in sync with theme.css (same values). theme.css is the source of
 * truth for the Tailwind side; this mirrors it for the plain-CSS side. If you
 * change a token, change it in both.
 */
:root {
  /* Fonts */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-wordmark: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* "Gridiron" palette */
  --color-navy: #0b2545;
  --color-navy-2: #13315c;
  --color-amber: #ffb703;
  --color-amber-dark: #e09600;
  --color-ink: #12161f;
  --color-ink-soft: #39414f;
  --color-muted: #5b6472;
  --color-line: #e4e7ec;
  --color-bg: #f6f7f9;
  --color-card: #ffffff;
  --color-tint: #fff9ec;
  --color-link: #1b64c4;

  /* Type scale (px comments assume a 16px root) */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */

  /* Radius */
  --radius-card: 10px;

  /* ── Legacy alias bridge ──────────────────────────────────────────────────
   * rankings' bespoke rk- CSS reads these names. Kept so it consumes the shared
   * palette unchanged. Retire an alias once no stylesheet references it. */
  --hc-font-wordmark: var(--font-wordmark);
  --rk-navy: var(--color-navy);
  --rk-navy2: var(--color-navy-2);
  --rk-amber: var(--color-amber);
  --rk-amber-d: var(--color-amber-dark);
  --rk-ink: var(--color-ink);
  --rk-muted: var(--color-muted);
  --rk-line: var(--color-line);
  --rk-bg: var(--color-bg);
  --rk-card: var(--color-card);
  --rk-tint: var(--color-tint);
  --rk-link: var(--color-link);
  --rk-radius: var(--radius-card);
}

/* Wordmark lockup — consistent across every surface. */
.harpcrate {
  font-family: var(--font-wordmark);
}

.harpcrate sup {
  font-size: 0.35em;
  top: -1.5em;
}

img.logo-white {
  filter: invert(1);
}