:root {
  /* Static/Fallback Landing Variables */
  --fallback-logo-text: "Lead Form";
  --fallback-logo-size: 4rem;
  --fallback-base-color-h: 194;
  --fallback-base-color-s: 51%;
  --fallback-base-color-l: 28%;
  --fallback-second-color-h: 194;
  --fallback-second-color-s: 51%;
  --fallback-second-color-l: 28%;
  --fallback-primary-color: #2c5aa0;
  --fallback-secondary-color: #ffffff;

  /* Static UI Variables */
  --grey-221: rgba(221, 221, 221, 0.6);
  --DFDFDF: #dfdfdf;
  --input-color: #ddd;
  --input-bg-color: rgba(0, 0, 0, 0.4);
  --modal-bg-color: rgba(0, 0, 0, 0.9);

  /* Colors */
  --lead-form-color-primary: #dc3545;
  --lead-form-color-primary-hover: #c82333;
  --lead-form-color-secondary: #666;
  --lead-form-color-dark: #333;
  --lead-form-color-light: #f8f9fa;
  --lead-form-color-white: #fff;
  --lead-form-color-border: #a57c7c;
  --lead-form-color-success: #28a745;
  --lead-form-color-success-hover: #218838;
  --lead-form-color-success-light: #61ba4b14;
  --lead-form-color-success-dark: rgba(0, 167, 80, 1);
  --lead-form-color-green: #2ecc71;
  --lead-form-color-green-hover: #27ae60;
  --lead-form-color-tooltip-bg: #ffa3a0;
  --lead-form-color-success-icon: #00a750;
  --lead-form-color-agreement-text: #212529;
  --lead-form-chevron-filter: brightness(0) saturate(100%) invert(50%) sepia(0%)
    saturate(2045%) hue-rotate(336deg) brightness(99%) contrast(108%);

  /* Dynamic Landing Variables - These use fallbacks defined above */
  --landing-logo-text: var(--logo-text, var(--fallback-logo-text));
  --landing-logo-size: var(--logo-size, var(--fallback-logo-size));
  --landing-primary-color: var(--primary-color, var(--fallback-primary-color));
  --landing-secondary-color: var(
    --secondary-color,
    var(--fallback-secondary-color)
  );
  --landing-base-color: hsl(
    var(--base-color-h, var(--fallback-base-color-h)),
    var(--base-color-s, var(--fallback-base-color-s)),
    var(--base-color-l, var(--fallback-base-color-l))
  );
  --landing-second-color: hsl(
    var(--second-color-h, var(--fallback-second-color-h)),
    var(--second-color-s, var(--fallback-second-color-s)),
    var(--second-color-l, var(--fallback-second-color-l))
  );

  /* Override default colors with landing colors when available */
  --lead-form-color-primary: var(--landing-primary-color);
  --lead-form-color-primary-hover: color-mix(
    in srgb,
    var(--landing-primary-color) 85%,
    black 15%
  );

  /* Filters */
  --lead-form-filter-white: brightness(0) saturate(100%) invert(100%)
    sepia(100%) saturate(1%) hue-rotate(334deg) brightness(104%) contrast(101%);

  /* Icon Sizes */
  --lead-form-success-icon-size: 26px;
  --lead-form-success-icon-inner-size: 18px;
  --lead-form-success-icon-right-position: 16px;

  /* Spacing */
  --lead-form-spacing-xs: 5px;
  --lead-form-spacing-sm: 8px;
  --lead-form-spacing: 10px;
  --lead-form-spacing-md: 15px;
  --lead-form-spacing-lg: 20px;
  --lead-form-spacing-xl: 30px;
  --lead-form-spacing-xxl: 40px;

  /* Border */
  --lead-form-border-radius-sm: 3px;
  --lead-form-border-radius: 4px;
  --lead-form-border-radius-lg: 8px;
  --lead-form-border-radius-round: 50%;

  /* Shadows */
  --lead-form-shadow-default: 0 0 10px rgba(0, 0, 0, 0.1);
  --lead-form-shadow-focus: 0 0 0 1px rgba(0, 167, 80, 0.57);
  --lead-form-shadow-error: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);

  /* Fonts */
  --lead-form-font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --lead-form-font-size-sm: 0.8rem;
  --lead-form-font-size: 1rem;
  --lead-form-font-size-md: 1.25rem;
  --lead-form-font-size-lg: 1.5rem;
  --lead-form-font-size-xl: 2.5rem;
  --lead-form-font-weight-normal: 400;
  --lead-form-font-weight-medium: 500;
  --lead-form-font-weight-bold: 600;
  --lead-form-font-weight-bolder: 700;

  /* Animations */
  --lead-form-transition-speed: 0.3s;
}