/* base.css — maps Applied Vibe tokens onto Pico CSS.
   Load order matters: pico.min.css, then tokens.css, then this file. */

/* Pico scopes its colour theme to `:root:not([data-theme])` — specificity
   (0,1,1) — which beats a plain `:root` (0,1,0). Matching that specificity is
   mandatory: with plain `:root` every --pico-* colour below silently loses and
   you get Pico's stock blue-on-dark instead of ink-on-newsprint. The
   [data-theme] arm covers apps that set the attribute explicitly, and equal
   specificity is settled by load order — this file must come after Pico. */
:root:not([data-theme]),
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* Riso is a light process. There is no dark mode; the paper is the paper. */
  color-scheme: light;

  /* Pico surface + ink */
  --pico-background-color: var(--av-color-neutral);
  --pico-color: var(--av-color-primary);

  /* Headings are themed separately by Pico. DESIGN.md puts every heading in
     Federal Ink, so map them explicitly — and it keeps headings legible if an
     app ever forgets data-theme="light" and Pico's dark block applies. */
  --pico-h1-color: var(--av-color-primary);
  --pico-h2-color: var(--av-color-primary);
  --pico-h3-color: var(--av-color-primary);
  --pico-h4-color: var(--av-color-primary);
  --pico-h5-color: var(--av-color-primary);
  --pico-h6-color: var(--av-color-primary);
  --pico-muted-color: var(--av-color-secondary);
  --pico-muted-border-color: var(--av-color-secondary);
  --pico-border-color: var(--av-color-secondary);

  /* Pico accent — fill only, never text */
  --pico-primary-background: var(--av-color-tertiary);
  --pico-primary-hover-background: var(--av-color-aqua);
  --pico-primary-inverse: var(--av-color-primary);
  --pico-primary: var(--av-color-primary);
  --pico-primary-focus: var(--av-color-tertiary);

  /* No elevation, anywhere. Pico styles <article> as a raised card with a
     box-shadow and a tinted fill; riso is a flat process, so both go. Cards
     keep the paper and are defined by a rule and their padding. */
  --pico-card-background-color: var(--av-color-neutral);
  --pico-card-sectioning-background-color: var(--av-color-neutral);
  --pico-card-border-color: var(--av-color-secondary);
  --pico-box-shadow: none;
  --pico-card-box-shadow: none;

  /* Code sits on the paper. DESIGN.md is explicit that depth comes from rules
     and whitespace, never a tinted panel, so Pico's grey code fill has to go —
     the mono face is the distinction. */
  --pico-code-background-color: var(--av-code-block-background-color);
  --pico-code-color: var(--av-code-block-text-color);
  --pico-code-kbd-background-color: var(--av-color-primary);
  --pico-code-kbd-color: var(--av-color-neutral);

  /* Type */
  --pico-font-family: var(--av-font-body-md-family);
  --pico-font-size: var(--av-font-body-md-size);
  --pico-line-height: var(--av-font-body-md-leading);
  --pico-font-family-monospace: var(--av-font-code-family);

  /* Shape + rhythm */
  --pico-border-radius: var(--av-radius-md);
  --pico-spacing: var(--av-space-md);
  --pico-block-spacing-vertical: var(--av-space-lg);
  --pico-form-element-spacing-vertical: var(--av-space-sm);
}

/* Single measure. Body text stops at 68 characters. */
body > main,
.measure {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: var(--av-space-md);
}

h1 {
  font-family: var(--av-font-display-xl-family);
  font-size: var(--av-font-display-xl-size);
  font-weight: var(--av-font-display-xl-weight);
  line-height: var(--av-font-display-xl-leading);
  letter-spacing: var(--av-font-display-xl-tracking);
}

h2,
h3 {
  font-family: var(--av-font-display-md-family);
  font-size: var(--av-font-display-md-size);
  font-weight: var(--av-font-display-md-weight);
  line-height: var(--av-font-display-md-leading);
  letter-spacing: var(--av-font-display-md-tracking);
}

/* Buttons carry the button-primary tokens: Fluoro Pink fill (via Pico), ink
   label, DM Mono uppercase. Pico supplies the fill; the type is ours. */
button,
[role="button"],
input:is([type="submit"], [type="button"], [type="reset"]) {
  font: var(--av-button-primary-font);
  letter-spacing: var(--av-button-primary-tracking);
  text-transform: uppercase;
  border-radius: var(--av-button-primary-rounded);
}

/* Labels, tags, accession numbers. Mono, uppercase, tracked out. */
.label,
.meta {
  font: var(--av-meta-font);
  letter-spacing: var(--av-meta-tracking);
  text-transform: uppercase;
  color: var(--av-color-secondary);
}

.tag {
  display: inline-block;
  font: var(--av-accession-tag-font);
  letter-spacing: var(--av-accession-tag-tracking);
  text-transform: uppercase;
  background: var(--av-accession-tag-background-color);
  color: var(--av-accession-tag-text-color);
  border-radius: var(--av-accession-tag-rounded);
  padding: var(--av-accession-tag-padding) var(--av-space-sm);
}

/* Flat process: rules and space, no shadows. */
.specimen {
  position: relative;
  isolation: isolate;
  padding: var(--av-specimen-card-padding) 0;
  border-block-end: 1px solid var(--av-color-secondary);
  /* The paper, stated explicitly rather than inherited: it has to be inside
     the isolated blend group for the overprint to multiply against it. Same
     colour as the page, so this is still the paper, not a tinted panel. */
  background: var(--av-color-neutral);
}

/* Signature: the overprint. One per page.
   A pink pass sweeps across the row and multiplies against the aqua tag.

   It must paint ABOVE the row's content, not below it. multiply blends with
   whatever is already painted beneath it inside the isolated group, so a pass
   sitting at z-index -1 has nothing under it but the paper and produces flat
   pink — which is what a negative z-index did here for a long time. Above the
   content, pink over aqua yields the third colour the palette never declares,
   and because multiply only ever darkens, the ink text under it stays legible.

   pointer-events: none, or the overlay would swallow clicks on the row. */
.specimen::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--av-space-md) * -1);
  background: var(--av-color-tertiary);
  mix-blend-mode: multiply;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
  pointer-events: none;
  z-index: 1;
}

.specimen:hover::before,
.specimen:focus-within::before {
  transform: scaleX(1);
}

:focus-visible {
  outline: 2px solid var(--av-color-tertiary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .specimen::before {
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}