/* Design-system · base — typography + primitives shared by every module. */

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* Display / display-family */
.pk-display { font-family: var(--font-display); font-weight: var(--fw-extrabold); letter-spacing: -0.01em; }
.pk-serif { font-family: var(--font-serif); }

/* Headings semantic defaults */
h1 { font-family: var(--font-display); font-size: var(--fs-4xl); line-height: var(--lh-tight); font-weight: var(--fw-extrabold); }
h2 { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
p { color: var(--color-text); }
.pk-muted { color: var(--color-text-muted); }
.pk-num { font-variant-numeric: tabular-nums lining-nums; }

/* Boot state (shown before app.js hydrates) */
.pk-boot { display: grid; place-items: center; min-height: 100vh; padding: var(--sp-8); text-align: center; gap: var(--sp-2); }
.pk-boot__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-3xl); }
.pk-boot__hint  { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Noscript fallback */
.pk-noscript { max-width: 480px; margin: var(--sp-10) auto; padding: var(--sp-7); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; }
.pk-noscript h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }

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