/*
 * shanicoat-lite: the shanigo.info site theme.
 *
 * A small, dependency-free cut of shanicoat, the shanigo project's design
 * system (shani-go/shanigo: shanicoat/tokens.css and
 * shanicoat/src/styles/primitives.css, as of commit 79e9980, 2026-09-26). It
 * keeps shanicoat's two-layer token structure and its role-token names, so a
 * page styled here reads like a shanigo tool:
 *
 *   Layer 1, palette: shani-coat, the site's own palette, sampled from a photo
 *     of Shani (2026-10-15): her near-black stripes and tail, the warm
 *     grey-brown and golden caramel of her coat, the silver of her muzzle, and
 *     her cream paws. Raw hex appears only in this block.
 *   Layer 2, roles: the shanicoat role tokens a static site needs (surfaces,
 *     text, brand, interactive state, focus), mapped as shanicoat maps them.
 *     Everything below the token block references roles, never the palette.
 *   Non-color scales: shanicoat's spacing, type, radius, and motion steps.
 *
 * Deliberate differences from shanicoat:
 *   - The palette is not shanicoat's. It sits between shanicoat's
 *     shani-brindle (saturated orange on near-black) and a muted tan and grey
 *     trial: a caramel accent, warm grey-brown surfaces that stand apart from
 *     the page, and visible borders. shani-coat is the only theme and applies
 *     at :root; there is no data-theme switch and no JavaScript.
 *   - Font sizes are shanicoat's pixel steps written in rem (16px root), so the
 *     page follows the reader's browser font-size setting. Body text uses
 *     step 2 at line-height step 2 (shanicoat's tools use step 1): this is a
 *     reading page, not a workbench.
 *   - Dropped: the Cue_Scale, grade-band, and feedback roles, and every React
 *     component. Added: one layout token (--measure), the site shell (header
 *     with its brindle band, main column, footer), and plain-CSS card, button,
 *     chip, and fact-list patterns modelled on the shaniden hub's chrome.
 *
 * Contrast on --bg, --surface, and --surface-raised (WCAG 2.1, computed
 * 2026-10-15): --text at least 11:1, --text-muted 6.3:1, --brand 5.6:1,
 * --brand-bright 7.8:1, and --on-accent on --brand 8.2:1. --brand-dim (pressed
 * links and buttons) is 5.2:1 on --surface. --border is 2.1:1 on --surface:
 * visible, but nothing relies on it alone.
 *
 * Built to be cheap to serve: no @import and no web fonts. The one url() is
 * the header's brindle texture, a same-site SVG, so a first visit costs one
 * HTML request plus two small cached ones, and the pages work under a
 * `default-src 'none'; style-src 'self'; img-src 'self'` content security
 * policy. Keep it that way: no inline styles in the pages either.
 */

/* =========================================================================
 * Tokens: shani-coat
 * ========================================================================= */
:root {
  color-scheme: dark;

  /* --- Layer 1: palette (the only raw hex in this file) --- */
  --palette-stripe: #141110; /* the near-black stripes and tail */
  --palette-coat-dark: #2a221d; /* the warm grey-brown under the stripes */
  --palette-coat-shade: #3b3029;
  --palette-coat-edge: #665343;
  --palette-caramel: #e29d58; /* the golden caramel in the sun */
  --palette-caramel-light: #f3c28c;
  --palette-fawn: #c08a55;
  --palette-cream: #f4ede3; /* paws and eyebrows */
  --palette-silver: #c2b5a6; /* muzzle and chest */

  /* --- Layer 2: role tokens (shanicoat names) --- */

  /* Surfaces and structure */
  --bg: var(--palette-stripe);
  --surface: var(--palette-coat-dark);
  --surface-raised: var(--palette-coat-shade);
  --border: var(--palette-coat-edge);

  /* Text */
  --text: var(--palette-cream);
  --text-muted: var(--palette-silver);
  --on-accent: var(--palette-stripe);

  /* Brand accent (identity, distinct from interactive) */
  --brand: var(--palette-caramel);
  --brand-bright: var(--palette-caramel-light);
  --brand-dim: var(--palette-fawn);

  /* Interactive state */
  --interactive: var(--brand);
  --interactive-hover: var(--brand-bright);
  --interactive-active: var(--brand-dim);
  --focus-ring: var(--brand-bright);

  /* --- Non-color tokens (shanicoat's scales) --- */

  /* Shape */
  --radius: 10px;

  /* Spacing, referenced by named step only */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;

  /* Typography: shanicoat's 12 / 14 / 16 / 20 / 26 px steps, in rem */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-0: 0.75rem;
  --font-size-1: 0.875rem;
  --font-size-2: 1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.625rem;
  --line-height-0: 1.2;
  --line-height-1: 1.4;
  --line-height-2: 1.6;

  /* Motion (authored only under prefers-reduced-motion: no-preference) */
  --motion-ui: 120ms;

  /* Layout (lite only): the width of the reading column */
  --measure: 40rem;
}

/* =========================================================================
 * Primitives: reset, document defaults, focus ring, screen-reader utility.
 * Behaviour as in shanicoat's primitives module.
 * ========================================================================= */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family);
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Visible focus ring on every focusable element; 2px with a 2px offset so it
 * sits outside the element and is never clipped. */
:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--brand);
  color: var(--on-accent);
}

/* --- Text --- */
h1,
h2,
h3 {
  line-height: var(--line-height-0);
  letter-spacing: 0.01em;
}

h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-4);
  font-weight: 700;
}

h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-3);
  font-weight: 700;
}

p {
  margin: 0 0 var(--space-5);
}

a {
  color: var(--interactive);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--interactive-hover);
}

a:active {
  color: var(--interactive-active);
}

.lead {
  color: var(--text-muted);
  font-size: var(--font-size-3);
  line-height: var(--line-height-1);
}

/* An uppercase label above a heading, as in the shaniden sidebar's panel
 * titles. */
.eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--brand-bright);
  font-size: var(--font-size-0);
  font-weight: 700;
  line-height: var(--line-height-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =========================================================================
 * Site shell: header, main column, footer
 * ========================================================================= */
.site-header {
  background: var(--surface);
}

.site-header__inner,
.site-footer__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
}

/* The wordmark, styled like the shaniden navbar title. */
.site-title {
  margin: 0;
  font-size: var(--font-size-3);
  font-weight: 700;
  line-height: var(--line-height-0);
  letter-spacing: 0.02em;
}

.site-title a {
  color: var(--brand);
  text-decoration: none;
}

.site-title a:hover {
  color: var(--brand-bright);
}

/* The brindle band: the header's bottom edge, drawn after Shani's coat, soft
 * near-black streaks over fawn that shades through caramel and silver. The texture
 * is `brindle.svg` beside this file: a few hundred bytes of SVG noise, fetched
 * once and cached, because gradients alone read as a dashed line, not fur.
 * Until it loads, or if it never does, the band is plain fawn (a mix of role
 * tokens). Decorative only: an empty pseudo-element. */
.site-header::after {
  content: "";
  display: block;
  height: var(--space-3);
  background: color-mix(in srgb, var(--brand-dim) 65%, var(--text-muted)) url("brindle.svg")
    repeat-x 0 0 / auto 100%;
}

.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) calc(var(--space-6) * 2);
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--font-size-1);
}

.site-footer p {
  margin: 0;
}

/* =========================================================================
 * Patterns
 * ========================================================================= */

/* Card: a bounded section on the surface tone. */
.card {
  margin: var(--space-6) 0 0;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.card > :last-child {
  margin-bottom: 0;
}

/* Button: a link or button with the brand fill, like the shaniden Run
 * button. Its fill carries the boundary (6.8:1 on --surface). */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--interactive);
  border-radius: var(--radius);
  background: var(--interactive);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  line-height: var(--line-height-1);
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--interactive-hover);
  background: var(--interactive-hover);
  color: var(--on-accent);
}

.button:active {
  border-color: var(--interactive-active);
  background: var(--interactive-active);
  color: var(--on-accent);
}

/* A row of actions: a button and any plain links beside it. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin: var(--space-6) 0 0;
}

/* Chips: shanicoat's neutral chip, one step larger so every script stays
 * legible. Presentational, not interactive. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  white-space: nowrap;
}

/* Fact list: term and value pairs in two columns. */
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  font-size: var(--font-size-1);
}

.facts dt {
  color: var(--text-muted);
}

.facts dd {
  margin: 0;
}

/* =========================================================================
 * Motion: declared only when the reader has not asked for reduced motion, so
 * the reduced and unknown cases get none (shanicoat's convention).
 * ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  a,
  .button {
    transition:
      color var(--motion-ui) ease,
      background-color var(--motion-ui) ease,
      border-color var(--motion-ui) ease;
  }
}