/* Brand tokens: the book covers' teal and charcoal, with condensed headlines that echo the PROTECT+ wordmark.
   base.css reads every color and font from here. */

:root {
  --font-head: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --head-weight: 700;
  --head-stretch: 78%;
  --head-tracking: -0.005em;
  --quote-font: 500 1.35rem/1.45 "Inter", system-ui, sans-serif;

  --bg: #ffffff;
  --surface: #ffffff;
  --alt: #f1f5f4;
  --ink: #1f2526;
  --muted: #59625f;
  --line: #dde5e3;
  --link: #0a6f6a;
  --brand: #0a7a74;
  --on-brand: #ffffff;

  --header-bg: #2c3031;
  --header-ink: #ffffff;
  --nav-hover: #6fd6cd;
  --nav-track: rgba(255, 255, 255, .05);
  --nav-track-line: rgba(255, 255, 255, .1);
  --nav-pill-hover: rgba(111, 214, 205, .14);
  --nav-cta-bg: #12a199;
  --nav-cta-ink: #ffffff;
  --hero-bg: linear-gradient(160deg, #0f8d87 0%, #0a6763 100%);
  --hero-ink: #ffffff;
  --hero-eyebrow: #bdeee9;
  --hero-hl: #9fe6df;
  --hero-btn-bg: #ffffff;
  --hero-btn-ink: #0a5f5b;
  --chip-line: rgba(255, 255, 255, .35);
  --feature-bg: #2c3031;
  --feature-ink: #ffffff;
  --feature-eyebrow: #6fd6cd;
  --feature-card: rgba(255, 255, 255, .05);
  --feature-line: rgba(255, 255, 255, .12);
  --footer-bg: #222627;
  --footer-ink: #c7cfcd;
  --photo-bg: #dfe9e7;

  /* Age colors: the dot on each age chip and the top edge of each book card */
  --age-littles: #e0b43c;
  --age-kids: #e07a52;
  --age-preteens: #a78bd8;
  --age-teens: #7fa7d8;
  --age-adults: #e0413f;

  --radius: 10px;
  --radius-btn: 6px;
  --radius-input: 6px;
  --radius-book: 3px;
  --card-shadow: none;
  --book-shadow: 0 16px 36px rgba(0, 0, 0, .3);
}