/* Pearto accessibility and contrast polish.
 * Loaded last on public pages so text/focus tokens remain legible even when
 * feature-specific pastel layers are present.
 */
:root {
  /* Light-theme semantic copy. These stay above WCAG AA contrast on Pearto's
     common white/off-white surfaces while remaining visually secondary. */
  --text-muted: #536a74;
  --text-subtle: #596f79;

  /* quality-pass.css uses these as semantic text accents in several hubs. */
  --qp-copy: #52678f;
  --qp-muted: #60708f;
  --qp-violet: #6655c7;
  --qp-blue: #2f6fa7;
  --qp-pink: #a9447b;
  --qp-green: #167454;

  --focus-ring: #5c4ab4;
  --focus-ring-dark: #aeead0;
}

/* A focus indicator should be clearly visible without depending on a faint
   translucent halo. The dark theme receives a light ring below. */
:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
}

[data-theme="dark"] :focus-visible {
  outline-color: var(--focus-ring-dark) !important;
}

/* Placeholders are instructional text; keep them readable instead of ghosted. */
input::placeholder,
textarea::placeholder {
  color: #64747d;
  opacity: 1;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #9db4b0;
}

/* Preserve discoverability of links inside prose even when color perception is
   limited. Navigation/buttons keep their component styling. */
.prose a:not(.button),
.field-help a,
.small a,
.muted a,
.subtle a {
  text-decoration-thickness: .09em;
  text-underline-offset: .16em;
}

/* Selection should remain readable in both themes. */
::selection {
  background: #dcd5ff;
  color: #18223b;
}

[data-theme="dark"] ::selection {
  background: #5b4aa8;
  color: #ffffff;
}

/* Controls should not collapse below a reliable pointer/touch target when a
   feature supplies unusually compact padding. */
.button,
.button-ghost,
.button-quiet,
button[type="submit"],
input:not([type="checkbox"]):not([type="radio"]),
select,
summary {
  min-height: 44px;
}

/* Homepage Pearto Kids promo: the original bright gradient was attractive but
   one stop was too light for white button text and its secondary copy sat near
   the AA boundary. Keep the same visual family with text-safe tones. */
.kids-portal-copy span {
  color: #6547c4;
}

.kids-portal-copy p {
  color: #5f687f;
}

.kids-portal-button {
  background: linear-gradient(135deg, #5b43cf, #3f63c8);
  color: #fff;
}

.kids-portal-button:focus-visible {
  outline-color: #24315a !important;
  box-shadow: 0 0 0 5px rgba(255, 216, 90, .78);
}

/* Avoid hover-only motion on touch devices. */
@media (hover: none), (pointer: coarse) {
  .kids-portal-button:hover,
  .button:hover,
  .button-ghost:hover {
    transform: none;
  }
}

/* In high-contrast preferences, stop relying on very soft borders/shadows. */
@media (prefers-contrast: more) {
  :root {
    --text-muted: #435a64;
    --text-subtle: #465e68;
    --qp-copy: #435a80;
    --qp-muted: #4c5f82;
  }

  .card,
  .panel,
  .surface,
  .tool-card,
  input,
  select,
  textarea,
  button {
    border-color: currentColor;
  }

  .kids-portal-strip {
    border-bottom-color: currentColor;
  }
}

/* Windows/OS forced-colors users should receive native high-contrast controls
   instead of decorative gradients that can erase interaction states. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight !important;
  }

  .button,
  .button-ghost,
  .button-quiet,
  .card,
  .panel,
  .surface,
  .kids-portal-button {
    forced-color-adjust: auto;
  }
}