/* Design tokens: docs/PRD/13-color-palette.md, sampled from the extension's own logo.
   Fonts are self-hosted from ../fonts/ — never fonts.googleapis.com or any other
   font CDN (docs/specs/05-marketing-site.md §6.1: a live Google Fonts request would
   both break the "zero cross-origin requests" promise and leak visitor IPs). */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/baloo2-700.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-sans-400.woff2") format("woff2");
}

:root {
  --concierge-brown: #6b5e59;
  --scout-teal: #97b6b2;
  --deep-teal: #799d9c;
  --ink-charcoal: #27262a;
  --mist-white: #eaf0ea;

  /* Four rounds of live feedback on this one token: 93/7 -> 97/3
     mist/concierge-brown (still a visible sage-grey), then a switch to white
     as the base with mist-white as a minority tint at 55/45 (better, still
     read as not-quite-bright), then 72/28 (too far the other way, close
     enough to plain white to lose the brand tint entirely). Settled here,
     between the last two. Every contrast ratio in this file only improves as
     --bg lightens, since --ink/--muted/--teal-ink are all dark colors
     measured against it — re-verified below, not just assumed. */
  --bg: color-mix(in srgb, white 63%, var(--mist-white) 37%);
  --ink: var(--ink-charcoal);
  /* --muted is darker than a literal reading of the palette's own greys would give:
     the palette doc doesn't define a body-text grey, and the first value tried here
     (#6a6862) measured 4.40:1 against the old, darker --bg, just under WCAG AA's
     4.5:1 for normal text. Darkened until it cleared 4.5:1 with room to spare;
     against the lightened --bg above it now clears with more room still. */
  --muted: #5c5952;
  /* --deep-teal and --scout-teal are fill/accent colors only (badges, borders on
     non-text shapes, dot accents) — at 2.33:1 against --bg neither clears even the
     3:1 non-text minimum, so neither may be used as text or icon-stroke color.
     --teal-ink is the same hue, darkened for that purpose (6.55:1 against --bg). */
  --teal-ink: #3f5250;

  --font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;

  --max-width: 1040px;
  --focus-ring: 3px solid var(--deep-teal);
  --focus-ring-offset: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Crosshatch opacity brought down alongside --bg's lightening above — at the
     old 0.045 it read as visible texture on a lighter field instead of the
     faint paper-grain it's meant to be, and would have fought even harder
     against the brighter --bg above if left alone. */
  background:
    repeating-linear-gradient(45deg, rgba(107, 94, 89, 0.02) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(107, 94, 89, 0.02) 0 1px, transparent 1px 7px),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* Visible focus state for every interactive element (docs/PRD/12-accessibility.md).
   Never suppressed with outline: none without replacing it. */
a:focus-visible,
button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}