/* ============================================================
   Solving for Pattern — global base styles
   Import order: tokens/tokens.css → global.css → typography.css
   → utilities.css → components.css
   ============================================================ */

/* ---------- Reset (minimal, purposeful) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sfp-font-body);
  font-size: var(--sfp-text-body);
  line-height: var(--sfp-leading-body);
  color: var(--sfp-color-text-primary);
  background-color: var(--sfp-color-bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* ---------- Links ---------- */
a {
  color: var(--sfp-color-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--sfp-duration-fast) var(--sfp-ease-standard);
}

a:hover {
  color: var(--sfp-color-text-link-hover);
  text-decoration-thickness: 2px;
}

/* ---------- Focus ----------
   3px Prairie Gold ring over a 2px surface-colored offset.
   Applied via :focus-visible so pointer users are not shouted at. */
:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--sfp-focus-shadow);
  border-radius: var(--sfp-radius-sm);
}

/* ---------- Selection ---------- */
::selection {
  background-color: var(--sfp-gold-200);
  color: var(--sfp-watershed-900);
}

.sfp-theme-dark ::selection,
[data-sfp-theme='dark'] ::selection {
  background-color: var(--sfp-gold-500);
  color: var(--sfp-watershed-900);
}

/* ---------- Reduced motion: collapse all movement ---------- */
@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;
  }
}

/* ---------- Skip link ---------- */
.sfp-skip-link {
  position: absolute;
  top: var(--sfp-space-2);
  left: var(--sfp-space-2);
  z-index: var(--sfp-z-toast);
  padding: var(--sfp-space-3) var(--sfp-space-4);
  background-color: var(--sfp-color-bg-inverse);
  color: var(--sfp-color-text-inverse);
  font-family: var(--sfp-font-mono);
  font-size: var(--sfp-text-small);
  border-radius: var(--sfp-radius-md);
  text-decoration: none;
  transform: translateY(-200%);
}

.sfp-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--sfp-color-text-inverse);
}

/* ---------- Paper grain (optional, quiet) ----------
   Apply .sfp-grain to a section for subtle paper texture.
   Pure CSS noise via layered radial gradients — no image request. */
.sfp-grain {
  position: relative;
}

.sfp-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(rgba(18, 49, 43, 0.045) 1px, transparent 1px),
    radial-gradient(rgba(107, 79, 58, 0.035) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}