/*
 * The Map — sub-brand (warm earth tones, editorial guidebook).
 *
 * Activated by `body.brand--the-map`. Completely different palette from the
 * parent brand — warmer dark (`#1a1714`), cream backgrounds, forest + rust +
 * amber + navy accents. Pairs DM Sans with Playfair Display serif for an
 * editorial/expedition feel.
 *
 * Contrast on --map-cream #f7f3ec background:
 *   --map-ink    #1a1714 — 15.48:1  AAA
 *   --map-ink-soft #3d3530 — 10.07:1 AAA
 *   --map-ink-mute #5a5450 —  6.10:1 AA normal, AAA large
 *   --map-amber  #7a4a10 —  7.52:1  AAA normal
 *   --map-forest #2d4a2d —  9.03:1  AAA normal
 *   --map-rust   #8b3a1e —  7.18:1  AAA normal
 *   --map-navy   #1a2a4a — 13.62:1  AAA
 */

body.brand--the-map {
  /* Custom earth palette — kept as --map-* so it can't collide with the
     parent tokens when reading CSS during debugging. */
  --map-ink:      #1a1714;
  --map-ink-soft: #3d3530;
  --map-ink-mute: #5a5450;
  --map-cream:    #f7f3ec;
  --map-warm:     #ede8de;
  --map-amber:    #7a4a10;
  --map-amber-mid:#c4772a;
  --map-amber-light:#f0d4a8;
  --map-forest:   #2d4a2d;
  --map-forest-light:#c8dcc0;
  --map-rust:     #8b3a1e;
  --map-rust-light:#f0cdb8;
  --map-navy:     #1a2a4a;
  --map-navy-light:#d0d8e8;

  /* Rebind semantic aliases to map palette */
  --sss-bg:         var(--map-cream);
  --sss-bg-alt:     var(--map-warm);
  --sss-bg-surface: #ffffff;
  --sss-text:       var(--map-ink);
  --sss-text-soft:  var(--map-ink-soft);
  --sss-text-mute:  var(--map-ink-mute);
  --sss-link:       var(--map-amber);
  --sss-link-hover: var(--map-rust);
  --sss-accent:     var(--map-forest);
  --sss-accent-alt: var(--map-navy);
  --sss-border:      rgba(26, 23, 20, 0.12);
  --sss-border-soft: rgba(26, 23, 20, 0.06);

  --sss-focus: #005fcc;

  /* Font families for this brand — serif display, DM Sans body */
  --sss-font-display: var(--sss-font-serif);
  --sss-font-body:    var(--sss-font-sans);

  background: var(--sss-bg);
  color: var(--sss-text);
}

body.brand--the-map h1,
body.brand--the-map h2,
body.brand--the-map h3,
body.brand--the-map .sss-display {
  font-family: var(--sss-font-display);
  letter-spacing: var(--sss-tracking-tight);
}

body.brand--the-map a {
  color: var(--sss-link);
  text-decoration-color: rgba(122, 74, 16, 0.4);
  text-underline-offset: 0.15em;
}
body.brand--the-map a:hover,
body.brand--the-map a:focus-visible {
  color: var(--sss-link-hover);
  text-decoration-color: currentColor;
}