/* ==========================================================================
   FERNGLAS — BASE. Reset, global defaults, a11y baseline, RTL policy.

   RTL POLICY: this file and every component must use logical CSS properties
   (margin-inline, padding-block, inset-inline-start, border-inline-start,
   text-align: start, etc.) instead of physical ones (margin-left, left,
   border-left, text-align: left). That single discipline is the entire RTL
   layout strategy — flipping <html dir="rtl"> then requires zero extra CSS.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

#root {
  min-height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}

/* -- Heading scale: a bare <h1>-<h6> looks right with no class needed.
   Reach for .heading-* only when the visual size and the semantic
   level must differ (e.g. an <h3> that needs to read as the page's
   biggest heading). text-wrap: balance avoids ragged 2-3 word last
   lines on wrapped headings — native, no JS. -- */
h1,
h2,
h3 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
h4,
h5,
h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}
h1 {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
}
h4 {
  font-size: var(--text-lg);
}
h5 {
  font-size: var(--text-md);
}
h6 {
  font-size: var(--text-sm);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* -- [hidden] and a single class selector (.icon-btn, .btn, any
   flex/grid component) have equal specificity, so whichever is declared
   later in the cascade wins — components.css loads after this file, so
   its `display: inline-flex` etc. silently beat the browser's built-in
   `[hidden] { display: none }` and the element stays visible despite the
   attribute. Doubling the attribute selector doubles its specificity
   (0,2,0 vs. a class's 0,1,0), so this wins regardless of load order,
   without needing a source-order-dependent placement or !important. -- */
[hidden][hidden] {
  display: none;
}

a {
  color: var(--link);
}

img {
  max-width: 100%;
  display: block;
}

/* -- Focus -- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* -- Skip link: visually hidden until focused, meant to be the first
   focusable element on the page — WCAG 2.4.1 Bypass Blocks. Point its
   href at the page's main content id. Not needed on every project (a
   popup with no repeated nav has nothing to skip past), but any page with
   a sizeable nav/TOC before the main content should have one — this
   gallery didn't. -- */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-modal);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  background: var(--surface-raised);
  color: var(--text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevation-2);
  translate: 0 -150%;
  transition: translate var(--dur-fast) var(--ease);
}
.skip-link:focus {
  translate: 0 0;
}

/* -- Forced colors (Windows High Contrast mode): ghost/icon buttons and
   fields rely on background-color alone for their boundary, which
   forced-colors strips along with every other custom color — this
   restores a system-color border so control edges stay visible. -- */
@media (forced-colors: active) {
  .btn,
  .icon-btn,
  .input,
  .select {
    border: 1px solid ButtonText;
  }
}

/* -- Reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -- Scrollbars follow scheme (Chrome-only target, safe to rely on) -- */
* {
  scrollbar-color: var(--border-strong) transparent;
}