/* ============================================================
   STELLARIA DESIGN SYSTEM — BASE
   Reset, html/body defaults, typography defaults, and the
   universal accessibility scaffolding (focus, selection,
   skip link, sr-only, reduced motion, forced colors, print).

   Components inherit from this file. They should not need to
   re-declare focus rings, selection colors, or hit targets.

   Depends on: tokens.css
   Owns: a11y defaults — see docs/ACCESSIBILITY.md
   ============================================================ */


/* === RESET ================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Tell the browser this UA controls dark + light surfaces.
   This swaps native scrollbars and form chrome with the theme,
   so [data-theme="light"] sees the right native widget tones. */
:root {
  color-scheme: dark light;
}

[data-theme="light"] { color-scheme: light dark; }


/* === HTML / BODY ============================================ */

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--c-bg);
  color: var(--c-white);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  /* Light-on-dark reads lighter than it is; +0.05 leading helps */
  line-height: 1.6;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv02", "cv11";
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--c-accent);
}

img, canvas, svg, video { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-tactical);
}
a:hover { color: var(--c-accent-hi); }


/* === FORM CONTROL RESET =====================================
   Make every native control inherit type colour and surface so
   components can layer their own styling without fighting UA
   defaults. Border + radius are explicitly cleared. */

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  letter-spacing: inherit;
}

button { cursor: pointer; }

textarea { resize: vertical; }

/* Browsers occasionally hide the caret on transparent inputs.
   We re-assert the accent caret so it stays visible across UAs. */
input,
textarea,
[contenteditable] { caret-color: var(--c-accent); }


/* === HEADINGS =============================================== */

h1, .h1 {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.022em;
  color: var(--c-white);
  font-feature-settings: "ss01";
}

h2, .h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--c-white);
  max-width: 22ch;
}

h3, .h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--c-white);
}

h4, .h4 {
  font-family: var(--f-display);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--c-white);
}

p {
  color: var(--c-fg-dim);
  font-size: var(--t-body);
  line-height: 1.62;
  max-width: var(--measure-body);
}

/* Lead paragraph: follows a section headline, slightly larger */
.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  font-weight: 400;
  color: color-mix(in oklch, var(--c-white) 80%, transparent);
  max-width: var(--measure-lead);
}

/* Eyebrow: small label above a headline */
.eyebrow {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: color-mix(in oklch, var(--c-white) 55%, transparent);
  margin-bottom: var(--sp-2);
}

/* Tabular numerals — apply to any data surface */
.nums, [data-nums] {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Mono helper */
.font-mono { font-family: var(--f-mono); }


/* === SELECTION ==============================================
   Token-driven so the brand wash carries into highlighted
   ranges. Foreground stays at near-white so highlighted body
   copy keeps its 4.5:1 contrast. */

::selection {
  background: var(--c-selection, var(--c-accent-wash));
  color: var(--c-selection-fg, var(--c-white));
  /* No text-shadow on selection — it can drag chroma into the
     highlight on certain GPU compositors. */
  text-shadow: none;
}


/* === FOCUS ==================================================
   Strategy:
     1. Strip the default outline ONLY when :focus-visible
        does not apply (i.e. mouse focus). Keyboard focus
        always renders a ring.
     2. Apply the ring with :where() so the selector has zero
        specificity — components can override per-element
        without raising specificity wars.
     3. The ring is a 2px solid accent line offset by 2px from
        the element edge, with the system focus radius. The
        --shadow-focus token is reserved for surfaces where
        outline cannot reach (e.g. clipped overflow contexts).

   WCAG: SC 2.4.7 Focus Visible, SC 2.4.11 Focus Not Obscured. */

:focus { outline: none; }

:focus:not(:focus-visible) { outline: none; }

:where(
  a,
  button,
  input,
  textarea,
  select,
  summary,
  [tabindex],
  [role="button"],
  [role="link"],
  [role="tab"],
  [role="menuitem"],
  [role="option"],
  [contenteditable]
):focus-visible {
  outline: 2px solid var(--c-focus, var(--c-accent));
  outline-offset: 2px;
  border-radius: var(--r-1);
}


/* === SKIP LINK ==============================================
   Every page should include this as the first body child:

     <a class="skip-link" href="#main">Skip to content</a>

   Hidden off-canvas until focused. When a keyboard user lands
   on the page, Tab brings the link into view above all chrome.
   The href target should be the id of the page <main> landmark.

   WCAG: SC 2.4.1 Bypass Blocks. */

.skip-link {
  position: absolute;
  top: -10rem;
  left: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-bg);
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-2);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: var(--z-toast);
  transition: top var(--dur-fast) var(--ease-tactical);
}

.skip-link:focus,
.skip-link:focus-visible { top: var(--sp-2); outline: none; }


/* === VISUALLY HIDDEN ========================================
   Pulled from the canonical clip pattern (Scott O'Hara). Keeps
   content in the accessibility tree while removing it from
   visual flow. .sr-only is the alias name for parity with
   Tailwind / Bootstrap; both classes resolve to the same
   declarations. Use for screen-reader-only labels, headings,
   captions, and live region scaffolding. */

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* When focused (sr-only links the user can tab to), restore
   the element to flow — useful for "Jump to" anchors that we
   want to surface on focus. */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible,
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}


/* === HIT TARGET =============================================
   Apply to icon buttons, close affordances, and any compact
   trigger that would otherwise be smaller than the WCAG 2.5.5
   target size minimum (44x44 CSS pixels). Anchor-only icons
   in dense data tables can opt out — see docs/ACCESSIBILITY.md
   §10 (Touch targets) for the density justification. */

.hit-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* === REDUCED MOTION =========================================
   Universal blanket. Components and motion.css apply their own
   guards on top; this catches every implicit transition and
   keyframe in the system without requiring per-rule audits.

   WCAG: SC 2.3.3 Animation from Interactions. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* === HIGH CONTRAST PREFERENCE ===============================
   prefers-contrast: more bumps muted text up to dim, and
   stiffens border opacity so dividers don't disappear at low
   panel contrast. Tactical and accent tokens are unchanged —
   they already sit at AA against bg.

   WCAG: SC 1.4.3 Contrast (Minimum), SC 1.4.6 Contrast (Enhanced). */

@media (prefers-contrast: more) {
  :root {
    --c-fg-muted: var(--c-fg-dim);
    --c-border:   oklch(0.5 0.02 260 / 0.8);
    --c-border-h: oklch(0.6 0.02 260 / 0.9);
  }

  :where(a, button) { text-decoration: underline; }
}


/* === FORCED COLORS (Windows High Contrast / similar) =========
   System keywords (CanvasText, Highlight, ButtonText, LinkText)
   honour the user's enforced palette. We replace the accent
   ring with Highlight, and ensure primary buttons retain a
   1px border so they remain identifiable when their fill is
   replaced by the system surface.

   Reference: WCAG SC 1.4.1 Use of Color, plus the CSS
   Forced Colors Adjustment specification. */

@media (forced-colors: active) {
  :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  :where(.btn--primary, [role="button"]) {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }

  /* Ensure the skip link survives forced palettes. */
  .skip-link {
    background: Canvas;
    color: LinkText;
    border: 1px solid LinkText;
  }
}


/* === REDUCED TRANSPARENCY ===================================
   On macOS / iOS users can request reduced transparency. We
   resolve glassy surfaces to their solid equivalent. Most of
   the system already avoids translucency, but elev-1 / elev-2
   carry a soft alpha that we collapse here. */

@media (prefers-reduced-transparency: reduce) {
  :root {
    --c-surface:   var(--c-elev-1);
    --c-surface-2: var(--c-elev-2);
  }
}


/* === FOUC GUARD (OPT-IN) ====================================
   Uncomment for static / multi-page sites that need to hide
   the body until critical fonts arrive. SPAs (React, Vue, etc.)
   own first paint — leave commented or you'll ship invisible
   shells. Pair with `document.body.classList.add('loaded')`. */

/* body { visibility: hidden; } */
/* body.loaded { visibility: visible; } */


/* === PRINT ==================================================
   Strip dark surfaces, accent fills, animations, and chrome
   that doesn't belong on paper. Keeps headings, body copy,
   tables, and definition lists. 11pt body / 1.4 leading is
   the conventional print target for sans-serif at A4. */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  html, body {
    background: white !important;
    color: black !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.4;
  }

  /* Suppress structural chrome that has no print value. */
  nav,
  header[role="banner"] nav,
  footer,
  .skip-link,
  [data-print="hide"],
  [aria-hidden="true"] {
    display: none !important;
  }

  /* Expand link destinations for paper readers. */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #555 !important;
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after { content: ""; }

  /* Avoid orphaned headings and split table rows. */
  h1, h2, h3, h4 { break-after: avoid; }
  img, table, pre, blockquote { break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
}