/* ============================================================
   PretzelPort — theme.css
   Maps site-wide tokens onto the official brand palette defined
   in /assets/brand/brand.css (loaded before this file).
   Rebranding = swapping brand.css + the logo files in /assets/brand.
   ============================================================ */

:root {
  /* Surfaces */
  --bg: var(--pp-canvas);        /* page background */
  --surface: var(--pp-paper);    /* cards, raised elements */
  --line: var(--pp-border);      /* hairline borders */

  /* Text */
  --ink: var(--pp-ink);
  --ink-soft: var(--pp-ink-soft);
  --ink-faint: var(--pp-ink-faint);

  /* Accent — teal is a dose, not a theme (see brand.css) */
  --accent: var(--pp-teal);
  --accent-hover: var(--pp-teal-deep);
  --accent-bright: var(--pp-teal-bright); /* only on dark surfaces */
  --accent-ink: #ffffff;                  /* text on accent fills */
  --accent-tint: color-mix(in srgb, var(--pp-teal) 10%, var(--pp-paper));

  /* Footer / dark band */
  --footer-bg: var(--pp-ink);
  --footer-ink: var(--pp-paper);
  --footer-ink-soft: #a3a7a6;

  /* Typography */
  --font-display: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}