/* Savage Language Tools: the science homepage (assets/home/home.css) in the
   sister site's coral. Same navy, type, spacing and components; every place
   science is blue, this is coral. Linked after home.css. */
:root {
  --blue: oklch(0.76 0.13 32);          /* = --sst-coral */
  --blue-btn: oklch(0.6 0.17 32);       /* = --sst-coral-btn */
  --btn-hover: oklch(0.66 0.17 32);
}

.wordmark span:last-child { color: var(--coral); }

.btn--primary:hover, button.btn--primary:hover, .nav-kofi:hover, .empty button:hover { background: var(--btn-hover); }
.btn--ghost:hover { border-color: var(--blue-btn); }
.tile:hover { border-color: oklch(0.55 0.1 32); }
.chip:hover { border-color: oklch(0.48 0.07 32); }
.chip[aria-pressed="true"] { background: oklch(0.3 0.07 32); border-color: oklch(0.62 0.14 32); color: oklch(0.9 0.05 32); }
.tile-go--play { color: var(--coral); }

/* Language cards: three across, tinted by each language's pill hue. */
.paths--langs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.path--lang {
  --card: oklch(0.2 0.035 var(--h)); --bd: oklch(0.33 0.06 var(--h));
  --bd-hover: oklch(0.72 0.12 var(--h)); --btn: oklch(0.3 0.07 var(--h));
  grid-template-columns: 1fr; grid-template-rows: auto 1fr;
}
.path--lang .path-icon {
  font-size: 15px; font-weight: 800; letter-spacing: 0.04em; color: oklch(0.88 0.09 var(--h));
}
.path--lang .path-btn { color: oklch(0.92 0.06 var(--h)); }
.path--lang:hover .path-btn { background: oklch(0.36 0.09 var(--h)); }
/* Screenshot across the top of each card, above the copy. */
.path--lang .path-media { order: -1; aspect-ratio: 16 / 10; min-height: 0; border-bottom: 1px solid var(--bd); }

/* The link across to science keeps science's blue, so it reads as the other site. */
.nav-sister { color: oklch(0.8 0.1 240); }
.sister { --sister-accent: oklch(0.74 0.14 240); }
.sister .atom span { border-color: oklch(0.74 0.14 240); }
.sister .atom span:nth-child(4) { background: oklch(0.74 0.14 240); }

/* Light theme: the same coral identity, deeper so it reads on white. */
.theme-light {
  --blue: oklch(0.56 0.16 32);
  --blue-btn: oklch(0.58 0.17 32);
  --btn-hover: oklch(0.52 0.17 32);
}
.theme-light :is(.btn--primary, button.btn--primary, .nav-kofi, .empty button):hover { background: var(--btn-hover); }
.theme-light .tile:hover { border-color: oklch(0.65 0.12 32); }
.theme-light .chip:hover { border-color: oklch(0.72 0.08 32); }
.theme-light .chip[aria-pressed="true"] { background: oklch(0.94 0.035 32); border-color: oklch(0.58 0.17 32); color: oklch(0.45 0.14 32); }
.theme-light .path--lang { --card: oklch(0.97 0.015 var(--h)); --bd: oklch(0.86 0.04 var(--h)); --bd-hover: oklch(0.55 0.13 var(--h)); --btn: oklch(0.92 0.04 var(--h)); }
.theme-light .path--lang .path-icon { color: oklch(0.42 0.12 var(--h)); }
.theme-light .path--lang .path-btn { color: oklch(0.38 0.1 var(--h)); }
.theme-light .path--lang:hover .path-btn { background: oklch(0.88 0.06 var(--h)); }
.theme-light .nav-sister { color: oklch(0.5 0.15 240); }
.theme-light .sister { --sister-accent: oklch(0.5 0.15 240); }
.theme-light .sister .atom span { border-color: oklch(0.5 0.15 240); }
.theme-light .sister .atom span:nth-child(4) { background: oklch(0.5 0.15 240); }