/* The typographic base and the palette plumbing under the look in sunmoon.css. */

/*
  Contract. A theme sets, on :root[data-skin="name"]:

    required, both schemes   --skin-light-bg      --skin-dark-bg
                             --skin-light-fg      --skin-dark-fg
                             --skin-light-muted   --skin-dark-muted
                             --skin-light-accent  --skin-dark-accent
    optional, either scheme  --skin-{light,dark}-{heading,rule,accent-hover,selection}
    optional, once           --skin-radius (0.25rem)   --skin-measure (36rem)
                             --skin-h1-size            --skin-tracking (0.02em)
                             --font-body  --font-heading  --font-entry  (style.css)

  light-dark() reads the color-scheme Pico already sets, so a theme never
  writes a dark-mode media query, and forcing data-theme still works.
  Everything below the palette is the typographic foundation every theme
  shares; a theme overrides any of it with a more specific selector.
*/

:root[data-skin] {
  --skin-bg: light-dark(var(--skin-light-bg), var(--skin-dark-bg));
  --skin-fg: light-dark(var(--skin-light-fg), var(--skin-dark-fg));
  --skin-muted: light-dark(var(--skin-light-muted), var(--skin-dark-muted));
  --skin-accent: light-dark(var(--skin-light-accent), var(--skin-dark-accent));
  --skin-heading: light-dark(
    var(--skin-light-heading, var(--skin-light-fg)),
    var(--skin-dark-heading, var(--skin-dark-fg))
  );
  --skin-rule: light-dark(
    var(--skin-light-rule, oklch(from var(--skin-light-fg) l c h / 0.15)),
    var(--skin-dark-rule, oklch(from var(--skin-dark-fg) l c h / 0.18))
  );
  --skin-accent-hover: light-dark(
    var(--skin-light-accent-hover, oklch(from var(--skin-light-accent) calc(l - 0.08) c h)),
    var(--skin-dark-accent-hover, oklch(from var(--skin-dark-accent) calc(l + 0.08) c h))
  );
  --skin-selection: light-dark(
    var(--skin-light-selection, oklch(from var(--skin-light-accent) l c h / 0.25)),
    var(--skin-dark-selection, oklch(from var(--skin-dark-accent) l c h / 0.3))
  );
  --skin-underline: oklch(from var(--skin-accent) l c h / 0.5);

  /* Hand the palette to Pico. */
  --pico-background-color: var(--skin-bg);
  --pico-color: var(--skin-fg);
  --pico-muted-color: var(--skin-muted);
  --pico-muted-border-color: var(--skin-rule);
  --pico-text-selection-color: var(--skin-selection);
  --pico-primary: var(--skin-accent);
  --pico-primary-background: var(--skin-accent);
  --pico-primary-underline: var(--skin-underline);
  --pico-primary-hover: var(--skin-accent-hover);
  --pico-primary-hover-background: var(--skin-accent-hover);
  --pico-primary-focus: var(--skin-underline);
  --pico-contrast: var(--skin-heading);
  --pico-contrast-hover: var(--skin-accent);
  --pico-h1-color: var(--skin-heading);
  --pico-h2-color: var(--skin-heading);
  --pico-h3-color: var(--skin-heading);
  --pico-h4-color: var(--skin-heading);
  --pico-h5-color: var(--skin-heading);
  --pico-h6-color: var(--skin-heading);
  --pico-border-radius: var(--skin-radius, 0.25rem);

  /* Pico grows the root size to 131% on wide screens; stop at 18px. */
  --pico-font-size: 100%;
  --pico-line-height: 1.6;
  --pico-typography-spacing-vertical: 1.15rem;
  --pico-text-underline-offset: 0.14em;
}

@media (min-width: 768px) {
  :root[data-skin] { --pico-font-size: 106.25%; }
}

@media (min-width: 1280px) {
  :root[data-skin] { --pico-font-size: 112.5%; }
}

/* Measure. Pico lets a column run to 1450px; hold it near 70 characters. */

[data-skin] body > :is(header, main, footer) {
  max-width: calc(var(--skin-measure, 36rem) + 2 * var(--pico-block-spacing-horizontal));
  padding-inline: var(--pico-block-spacing-horizontal);
}

[data-skin] body > header {
  padding-block: 1.5rem 1rem;
}

[data-skin] body > main {
  padding-block: 1.5rem 3rem;
}

[data-skin] body > footer {
  margin-top: 1rem;
  padding-block: 1.25rem 2.5rem;
  border-top: 1px solid var(--skin-rule);
  font-size: 0.875rem;
}

[data-skin] body {
  font-kerning: normal;
  hanging-punctuation: first;
}

[data-skin] :is(p, li, figcaption) {
  text-wrap: pretty;
}

/* Headings. Bebas Neue is condensed and all caps: it wants more size than
   Pico gives, a touch of tracking, and a tight leading. Entry titles inside
   lists keep the sizes in style.css. */

[data-skin] main > h1,
[data-skin] main > hgroup > h1 {
  --pico-font-size: var(--skin-h1-size, clamp(2.6rem, 2rem + 2.2vw, 3.5rem));
  --pico-line-height: 0.98;
  letter-spacing: var(--skin-tracking, 0.02em);
  text-wrap: balance;
}

[data-skin] main > hgroup {
  margin-bottom: 2rem;
}

[data-skin] main > hgroup > h1 {
  margin-bottom: 0.35rem;
}

[data-skin] main > h2 {
  --pico-font-size: 2rem;
  --pico-line-height: 1;
  letter-spacing: var(--skin-tracking, 0.02em);
  text-wrap: balance;
}

[data-skin] main > h3 {
  --pico-font-size: 1.6rem;
  --pico-line-height: 1.05;
  letter-spacing: calc(var(--skin-tracking, 0.02em) + 0.01em);
}

[data-skin] main > h4 {
  --pico-font-size: 1.35rem;
  --pico-line-height: 1.1;
  letter-spacing: calc(var(--skin-tracking, 0.02em) + 0.015em);
}

/* Wordmark and nav. The first ul holds the wordmark, the last the links.
   On a phone the links drop under the wordmark instead of squeezing it. */

[data-skin] header nav,
[data-skin] header nav > ul:last-of-type {
  --pico-nav-element-spacing-vertical: 0.5rem;
  flex-wrap: wrap;
  row-gap: 0.25rem;
}

/* Pico's link padding fills the list-item padding exactly, so two pills would
   touch. Trimming the link's own padding leaves a sliver on each side without
   changing the width of the list. */

[data-skin] header nav > ul:last-of-type {
  --pico-nav-link-spacing-horizontal: 0.35rem;
}

/* Below 38rem the links drop under the wordmark and the sun/moon control (the
   last item) leaves the row to sit top right, level with the wordmark, in the
   space the wrap leaves empty. The wrap is forced at the same width so the
   two changes can never disagree: measured, the nav needs 35.7rem for one
   row, which a 38rem viewport is the first to give it. */

[data-skin] header nav {
  position: relative;
}

@media (max-width: 38rem) {
  [data-skin] header nav > ul:first-of-type {
    flex-basis: 100%;
  }

  [data-skin] header nav > ul:last-of-type > li:last-child {
    position: absolute;
    top: 0.9rem;
    right: 0;
    padding: 0;
  }
}

[data-skin] header nav :is(strong, h1) {
  letter-spacing: 0.03em;
  white-space: nowrap;
}

[data-skin] header nav > ul:last-of-type a {
  font-size: 0.95rem;
}

[data-skin] header nav > ul:last-of-type a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
}

/* Links */

[data-skin] a {
  text-decoration-thickness: 1px;
  transition: color 120ms ease, text-decoration-color 120ms ease, background-color 120ms ease;
}

/* Entries */

[data-skin] .entries li {
  margin-bottom: 2rem;
}

[data-skin] .entries li hgroup > :last-child {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

/* The home page opens with a lede rather than a heading. */

[data-skin] [data-page="home"] main > p:first-child {
  font-size: 1.25rem;
  line-height: 1.45;
}