/**
 * Design tokens of nexus-forms. Generated by scripts/build-shared.mjs; do not edit by hand.
 * Custom properties only, no element selectors. Prefix --nxf- (shared with the other estate plugins, so a page with
 * several of them declares the same values once per stylesheet).
 */

/*
 * nxf-literals:start (mode fallbacks)
 * The only literal colours the module stylesheets ever reach. They apply when no theme presets exist
 * (--wp--preset--color--* undefined): light by default, dark when html[data-theme] says so, exactly as
 * nexus-estate/assets/css/modes.css switches the presets ("dark", or "auto" with a dark system preference).
 * The dark values are the kit's dark palette (kits/tokens.json), so a plugin-only site matches the estate.
 */
:root {
  --nxf-fallback-fg: #14222c;
  --nxf-fallback-fg-muted: #4b5d6b;
  --nxf-fallback-bg: #f4f7f9;
  --nxf-fallback-surface: #ffffff;
  --nxf-fallback-accent: #0f6e8c;
  --nxf-fallback-accent-fg: #ffffff;
  --nxf-fallback-danger: #9b2c2c;
  --nxf-fallback-border: #d5dee5;
  --nxf-fallback-focus: #0c4a6e;
}
:root[data-theme="dark"] {
  --nxf-fallback-fg: #ffffff;
  --nxf-fallback-fg-muted: #a3a3a3;
  --nxf-fallback-bg: #141414;
  --nxf-fallback-surface: #0a0a0a;
  --nxf-fallback-accent: #ffffff;
  --nxf-fallback-accent-fg: #000000;
  --nxf-fallback-danger: #f28b82;
  --nxf-fallback-border: rgba(255, 255, 255, 0.2);
  --nxf-fallback-focus: #8ab4f8;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --nxf-fallback-fg: #ffffff;
    --nxf-fallback-fg-muted: #a3a3a3;
    --nxf-fallback-bg: #141414;
    --nxf-fallback-surface: #0a0a0a;
    --nxf-fallback-accent: #ffffff;
    --nxf-fallback-accent-fg: #000000;
    --nxf-fallback-danger: #f28b82;
    --nxf-fallback-border: rgba(255, 255, 255, 0.2);
    --nxf-fallback-focus: #8ab4f8;
  }
}
/* nxf-literals:end */

/*
 * The colour tokens follow the theme presets first, so plugin surfaces switch with the estate's light and dark
 * modes (visual QA finding F4: placeholders stayed #f4f7f9 on the black page). No literal colour below this line.
 */
:root,
.nxf-root,
:host {
  --nxf-color-fg: var(--wp--preset--color--ink, var(--nxf-fallback-fg));
  --nxf-color-fg-muted: var(--wp--preset--color--ink-muted, var(--nxf-fallback-fg-muted));
  --nxf-color-bg: var(--wp--preset--color--muted, var(--nxf-fallback-bg));
  --nxf-color-surface: var(--wp--preset--color--surface, var(--nxf-fallback-surface));
  --nxf-color-accent: var(--wp--preset--color--primary, var(--nxf-fallback-accent));
  --nxf-color-accent-fg: var(--wp--preset--color--primary-ink, var(--nxf-fallback-accent-fg));
  --nxf-color-danger: var(--wp--preset--color--critical, var(--nxf-fallback-danger));
  --nxf-color-border: var(--wp--preset--color--hairline-strong, var(--nxf-fallback-border));
  --nxf-color-focus: var(--wp--preset--color--focus, var(--nxf-fallback-focus));
  --nxf-font: inherit;
  --nxf-font-size: 1rem;
  --nxf-line: 1.45;
  --nxf-space-1: 0.25rem;
  --nxf-space-2: 0.5rem;
  --nxf-space-3: 0.75rem;
  --nxf-space-4: 1rem;
  --nxf-space-5: 1.5rem;
  --nxf-radius: 0.5rem;
  --nxf-shadow: 0 1px 2px color-mix(in srgb, var(--nxf-color-fg) 8%, transparent);
  --nxf-touch: 2.75rem;
  /* WCAG 2.2 SC 2.5.8 floor (24 CSS px) for controls that sit inside a larger label target, such as checkboxes. */
  --nxf-target-min: 1.5rem;
  --nxf-iframe-min-height: 240px;
  --nxf-iframe-max-height: 900px;
  --nxf-z-widget: 1;
}

.nxf-root,
:host {
  color: var(--nxf-color-fg);
  background: var(--nxf-color-bg);
  font-family: var(--nxf-font);
  font-size: var(--nxf-font-size);
  line-height: var(--nxf-line);
}

.nxf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}