/* MyLQ brand token overrides.
 *
 * Loaded via NEXT_PUBLIC_BRAND_CSS (see pages/_document.tsx). Overrides the
 * --op-* design tokens from styles/outpace-tokens.css, which is where ~400 of
 * the app's colour usages actually resolve from — so re-pointing the tokens
 * rebrands the learner app AND the admin tools in one file. Setting only
 * NEXT_PUBLIC_BG_COLOR repaints the canvas and leaves every foreground colour
 * at its OutPace value, which is how you get black text on a navy page.
 *
 * Palette sampled from public/brands/mylq/new_logo.png:
 *   #073B89  navy — the "LQ" and the tagline
 *   #186AA9  blue — the "My"
 *
 * The canvas stays LIGHT on purpose. The app is designed dark-ink-on-light;
 * a dark canvas needs every foreground token re-derived, not just the bg.
 *
 * :root:root is deliberate — doubles specificity so this wins over
 * outpace-tokens.css regardless of which <link> the bundler emits first.
 */
:root:root {
  /* Canvas & surfaces — blue-tinted neutrals */
  --op-blush: #e8f1f8;
  --op-blush-soft: #f0f6fb;
  --op-cream: #f8fbfd;

  /* Action / CTA — the brand navy. White text on it clears 10:1, and it stays
     visibly blue against the near-black --op-ink used for neutral buttons. */
  --op-coral: #073b89;
  --op-coral-tint: rgba(7, 59, 137, 0.1);

  /* Highlight — brand blue. --op-yellow is used as a highlighter behind ink
     text, so the base tint is light and -deep carries the saturated brand hue. */
  --op-yellow: #9ecfea;
  --op-yellow-deep: #186aa9;
  --op-yellow-bright: #cbe5f4;

  /* Deep brand surface */
  --op-navy: #073b89;
  --op-teal: #186aa9;

  /* ponytail: --op-ink, the slate ramp and --op-success are inherited from
     outpace-tokens.css unchanged. Near-black ink is the highest-contrast
     choice on this canvas, greys are brand-neutral, and green must keep
     meaning "success" rather than becoming a brand colour. */
}