/*
  craft.css, micro-typography and interaction-detail baseline for the
  webdesigner craft pass (see references/craft-pass.md, section 3).

  Scope: typography polish, selection, focus, scroll, print, and reduced
  motion only. No layout, no components, no color beyond selection, focus,
  and the print block, which normalizes every element to ink on paper
  (remove that block if the project needs color-coded print output). Add it
  after the page's own tokens; every rule reads a custom
  property with a safe fallback, so nothing breaks before tokens exist and
  everything picks up the brand automatically once they do. Every rule stays
  at ordinary specificity (no forced-priority declarations), so a more
  specific project rule can still override any of these on purpose.

  Tokens this file reads (fallback shown, matching the webdesigner token
  convention in references/best-practices.md):
    --color-text          default #111111  (body ink, used for print and caret)
    --color-bg            default #ffffff  (canvas, used for selection fg)
    --color-accent        default #2f6fed  (selection bg and focus ring)
    --color-selection-bg  default var(--color-accent)
    --color-selection-fg  default var(--color-bg)
    --focus-ring-width     default 3px
    --focus-ring-offset    default 3px
    --scroll-offset        default 0px     (sticky header height, if any)
*/

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p, li, dd, figcaption, blockquote {
  text-wrap: pretty;
}

/* Progressive enhancement: hanging-punctuation is not Baseline yet (Safari
   family only as of 2026); other engines ignore it without side effects. */
blockquote, q, .prose {
  hanging-punctuation: first last;
}

body {
  font-optical-sizing: auto;
  font-kerning: normal;
}

/* Utility: align digits in tables, prices, and stats. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Utility: true small capitals where the face supports them, with the
   font-variant-caps fallback for faces that only expose the CSS feature. */
.small-caps {
  font-feature-settings: "smcp" 1, "c2sc" 1;
  font-variant-caps: small-caps;
}

::selection {
  background: var(--color-selection-bg, var(--color-accent, #2f6fed));
  color: var(--color-selection-fg, var(--color-bg, #ffffff));
}

:focus-visible {
  outline: var(--focus-ring-width, 3px) solid var(--color-accent, #2f6fed);
  outline-offset: var(--focus-ring-offset, 3px);
}

/* Anchors land below a sticky header instead of under it. */
:target,
[id] {
  scroll-margin-top: var(--scroll-offset, 0px);
}

/* Browser defaults that betray an unlooked-at page: the 40 px dd indent, the
   fieldset frame, figure margins, list padding. Reset once; the design adds
   back what it actually chose. */
dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-inline-size: 0; }
/* Prose lists keep their indent and markers; only navigation and explicitly
   role="list" collections drop them. */
ul[role="list"], ol[role="list"], nav ul, nav ol {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}

/* A skip link is parked off-screen until focused, so it never shows in a
   screenshot; on focus it lands inside the viewport with the ring above. */
.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  translate: 0 -200%;
  transition: translate 120ms ease-out;
}
.skip-link:focus-visible {
  translate: 0 0;
  z-index: 1000;
}

html {
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }

  html {
    scroll-behavior: auto;
  }
}

@media print {
  * {
    background: transparent;
    color: var(--color-text, #111111);
    box-shadow: none;
    text-shadow: none;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-weight: normal;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  @page {
    margin: 2cm;
  }
}

/* System high-contrast themes replace color entirely; keep the ring a
   system keyword here so it stays visible against whatever palette the
   user's OS enforces. */
@media (forced-colors: active) {
  :focus-visible {
    outline: var(--focus-ring-width, 3px) solid CanvasText;
    outline-offset: var(--focus-ring-offset, 3px);
  }
}