:root {
  /* ---- Brand palette ---- */
  color-scheme: "light";
  --color-base-100: oklch(97% 0.008 91.48deg);
  --color-base-200: oklch(95% 0.012 84.58deg);
  --color-base-300: oklch(91.47% 0.015 80.71deg);
  --color-base-content: oklch(31.98% 0.007 182.57deg);
  --color-primary: oklch(61.73% 0.056 147.34deg);
  --color-primary-content: oklch(100% 0 0deg);
  --color-secondary: oklch(78.4% 0.122 124.27deg);
  --color-secondary-content: oklch(31.98% 0.007 182.57deg);
  --color-accent: oklch(87.4% 0.155 93.99deg);
  --color-accent-content: oklch(31.98% 0.007 182.57deg);
  --color-neutral: oklch(85.05% 0.034 73.15deg);
  --color-neutral-content: oklch(31.98% 0.007 182.57deg);
  --color-info: oklch(62.57% 0.112 250.06deg);
  --color-info-content: oklch(100% 0 0deg);
  --color-success: oklch(63.7% 0.125 141.94deg);
  --color-success-content: oklch(100% 0 0deg);
  --color-warning: oklch(75.6% 0.154 57.99deg);
  --color-warning-content: oklch(31.98% 0.007 182.57deg);
  --color-error: oklch(71.51% 0.179 27.97deg);
  --color-error-content: oklch(100% 0 0deg);

  /* Darker primary for button hover / active states. */
  --color-primary-strong: color-mix(in srgb, var(--color-primary) 84%, #2F3433);

  /* ---- Radii ---- */
  --radius-selector: 0rem;
  --radius-field: 0rem;
  --radius-box: 0.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  /*
     ---- Typography ----
     heading  → Poppins (Medium)     · section & display headings
     body     → Lato (Regular)       · running text
     accent   → Dancing Script       · wordmark & script accents
  */
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Dancing Script", "Segoe Script", cursive;

  /* ---- Decorative gradients ---- */

  /*
     Animated headline shimmer — brand greens, gold and a warm accent.
     Reorder or add colours here to make the headline more or less vivid.
  */
  --gradient-brand: linear-gradient(
    100deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-accent),
    var(--color-warning),
    var(--color-primary)
  );

  /* Soft ambient colour wash behind the whole page. */
  --bg-wash:
    radial-gradient(55rem 40rem at 12% 8%,
      color-mix(in srgb, var(--color-secondary) 24%, transparent), transparent 62%),
    radial-gradient(52rem 42rem at 88% 92%,
      color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 60%),
    radial-gradient(42rem 40rem at 90% 6%,
      color-mix(in srgb, var(--color-info) 12%, transparent), transparent 60%);

  /* ---- Misc ---- */
  --border: 1px;
  --depth: 1;
  --noise: 0;

  /*
   ---- mosparo (advanced CSS integration, visible mode) ----
   Themed with the veatal tokens above. Active on the form pages, which also load
   https://captcha.fihe1.arcanasoft.net/build/mosparo-frontend.css. Values marked
   FIXED are required by mosparo and must stay as-is; the rest are free to adjust.
  */
  --mosparo-content-display: block;
  --mosparo-container-position: relative;
  --mosparo-border-color: var(--color-base-300);
  --mosparo-border-radius: var(--radius-field);
  --mosparo-border-width: var(--border);
  --mosparo-background-color: var(--color-base-100);
  --mosparo-text-color: var(--color-base-content);
  --mosparo-shadow-color: transparent;
  --mosparo-shadow-inset-color: transparent;
  --mosparo-circle-border-color: var(--color-base-300);
  --mosparo-circle-radius: var(--radius-box);
  --mosparo-circle-border-width: 2px;
  --mosparo-ping-animation-name: "mosparo__ping-animation";
  --mosparo-focus-circle-border-color: var(--color-primary);
  --mosparo-focus-circle-shadow-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --mosparo-loading-circle-border-color: var(--color-base-300);
  --mosparo-loading-circle-animated-border-color: var(--color-primary);
  --mosparo-success-border-color: var(--color-success);
  --mosparo-success-background-color: var(--color-base-100);
  --mosparo-success-circle-border-color: var(--color-success);
  --mosparo-success-text-color: var(--color-base-content);
  --mosparo-success-shadow-color: transparent;
  --mosparo-success-shadow-inset-color: transparent;
  --mosparo-failure-border-color: var(--color-error);
  --mosparo-failure-background-color: var(--color-base-100);
  --mosparo-failure-circle-border-color: var(--color-error);
  --mosparo-failure-text-color: var(--color-base-content);
  --mosparo-failure-text-error-color: var(--color-error);
  --mosparo-failure-shadow-color: transparent;
  --mosparo-failure-shadow-inset-color: transparent;
  --mosparo-show-logo: none;

}

/* Base font, plus helpers applied directly to elements. */
body { font-family: var(--font-body); }
.font-heading { font-family: var(--font-heading); }
.font-accent  { font-family: var(--font-accent); }

/* Gentle "breathing" scale for the lotus. */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* Slow rotation for the petal rings (reversed via animation-direction). */
@keyframes rotate360 {
  to { transform: rotate(360deg); }
}

/* Slow horizontal shimmer across the headline gradient. */
@keyframes gradient-shift {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/*
   Progressive enhancement: hide JS-only controls (the form submit buttons) until
   the inline head script upgrades <html> from .no-js to .js. This prevents a
   non-functional native submit when JavaScript is disabled; the <noscript>
   notice next to each form explains why.
*/
.no-js [data-js-required] {
  display: none !important;
}

/*
   Mosparo Captcha Integration:
   Force the Mosparo container and its generated inner wrapper to be full-width.
   We use !important to override the library's default inline styles and fixed widths.
*/
#mosparo-container,
#mosparo-container .mosparo__container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure the inner captcha box itself also expands to 100% of the available width. */
#mosparo-container .mosparo__box {
  width: 100% !important;
}