/* ============================================================
   RKVIST — Base resets & primitives
   Sensible defaults so specimen cards & kits inherit the brand.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-primary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); margin: 0; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Brand wordmark — magenta→orange gradient text in viewfinder brackets.
   Recreated as type so it scales & themes cleanly. */
.rk-logo {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0.34em 0.5em;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: 1;
  font-size: 28px;
}
.rk-logo__mark {
  background: var(--rk-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rk-magenta);
}
/* viewfinder corner brackets */
.rk-logo::before, .rk-logo::after,
.rk-logo .rk-logo__br::before, .rk-logo .rk-logo__br::after {
  content: "";
  position: absolute;
  width: 0.42em;
  height: 0.42em;
  border: 2px solid var(--rk-grey);
}
.rk-logo::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.rk-logo::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.rk-logo .rk-logo__br { position: absolute; inset: 0; }
.rk-logo .rk-logo__br::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.rk-logo .rk-logo__br::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Magenta "color splash" helper for B&W imagery */
.rk-bw { filter: grayscale(1) contrast(1.02); }

/* Visible, on-brand focus for any interactive element */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}