/*
 * Base rules shared by every page. Typography sits in @layer base so
 * Tailwind utilities can still override it; focus, skip-link and
 * reduced-motion stay unlayered on purpose so utilities cannot switch them off.
 */

@layer base {
  html {
    font-family: var(--pj-font-sans);
    font-size: 100%;
  }
}

:focus-visible {
  outline: var(--pj-focus-ring-width) solid var(--pj-focus-ring-color);
  outline-offset: var(--pj-focus-ring-offset);
}

/*
 * Underline field (existing-app style): the focus indicator moves to the field's
 * underline via focus-within on the wrapper, so the inner input drops its own ring.
 * Only use data-focus-proxy when the wrapper really shows focus.
 */
/* Brand-blue surfaces (page header): the ring switches to white so it stays visible. */
[data-pj-on-brand] {
  --pj-focus-ring-color: var(--pj-focus-ring-color-on-brand);
}

[data-focus-proxy]:focus-visible {
  outline: none;
}

.skip-link {
  position: absolute;
  left: calc(var(--spacing) * 4);
  top: calc(var(--spacing) * 4);
  z-index: var(--pj-z-banner);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-radius: var(--radius-field);
  background: var(--color-base-100);
  color: var(--color-primary);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

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