/* Paintpam Global — Base
 * Reset + foundational element styles.
 * Load order: tokens.css → base.css → components.css → (page-specific).
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");

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

html {
  background: var(--pp-bg);
  color: var(--pp-text);
  font-family: var(--pp-font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  /* Sprint 3.5 audit — tabular numerals on root so $10, counts, dates don't shift */
  font-variant-numeric: tabular-nums;
}

body {
  margin: 0;
  font-size: var(--pp-size-body);
  line-height: var(--pp-lh-normal);
  background: var(--pp-bg);
  color: var(--pp-text);
  min-height: 100vh;
  overflow-x: hidden;
  /* Sprint 3.5 audit — prevent orphans in paragraphs (Safari 17.5+, Chrome 117+) */
  text-wrap: pretty;
}

/* Sprint 3.5 audit — Skip-to-content link for keyboard / screen reader users (WCAG 2.4.1) */
.pp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--pp-z-toast);
}
.pp-skip-link:focus {
  left: 0;
  padding: 1rem;
  background: var(--pp-accent);
  color: var(--pp-bg);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--pp-radius-sm) 0;
  outline: 2px solid var(--pp-text);
  outline-offset: 2px;
}

/* Typography */
h1, h2, h3, h4, h5 {
  font-family: var(--pp-font-display);
  font-weight: 400;
  /* Sprint 3.5 audit — balance heading line wraps to avoid widows */
  text-wrap: balance;
  letter-spacing: var(--pp-tracking-tight);
  line-height: var(--pp-lh-tight);
  margin: 0;
  color: var(--pp-text);
}

h1 { font-size: var(--pp-size-h1); }
h2 { font-size: var(--pp-size-h2); }
h3 { font-size: var(--pp-size-h3); font-weight: 500; }

p {
  margin: 0;
  line-height: var(--pp-lh-relaxed);
  color: var(--pp-text-muted);
}

a {
  color: var(--pp-text);
  text-decoration: none;
  transition: color var(--pp-dur-fast) var(--pp-ease);
}

a:hover { color: var(--pp-accent); }

/* Lists clean default */
ul, ol { margin: 0; padding: 0; list-style: none; }

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Layout primitives */
.pp-container {
  max-width: var(--pp-max-width);
  margin: 0 auto;
  padding: 0 var(--pp-space-4);
}

@media (min-width: 768px) {
  .pp-container { padding: 0 var(--pp-space-5); }
}

.pp-section {
  padding: var(--pp-space-7) 0;
}

.pp-section--tight { padding: var(--pp-space-5) 0; }
.pp-section--loose { padding: var(--pp-space-8) 0; }

.pp-prose {
  max-width: var(--pp-content-max);
  margin: 0 auto;
}

/* Type utilities */
.pp-display {
  font-family: var(--pp-font-display);
  font-size: var(--pp-size-hero);
  line-height: var(--pp-lh-tight);
  letter-spacing: var(--pp-tracking-tight);
  font-weight: 400;
}

.pp-eyebrow {
  display: inline-block;
  font-family: var(--pp-font-body);
  font-size: var(--pp-size-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--pp-tracking-wide);
  color: var(--pp-accent);
  margin-bottom: var(--pp-space-2);
}

.pp-lede {
  font-size: 1.25rem;
  line-height: var(--pp-lh-relaxed);
  color: var(--pp-text-muted);
}

.pp-muted { color: var(--pp-text-muted); }
.pp-dim { color: var(--pp-text-dim); }
.pp-accent { color: var(--pp-accent); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Selection */
::selection {
  background: var(--pp-accent);
  color: var(--pp-bg);
}

/* Subtle texture overlay (utility, applied to sections needing it) */
.pp-grain {
  position: relative;
}

.pp-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.5) 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
}