/* Variables */
:root {
  --max-content-width: 1200px;

  /* Color variations for consistency */
  --primary-700: color-mix(in srgb, var(--primary-color) 80%, black); /* Darker version of primary color for hover states */
  --primary-500: var(--primary-color);
  --primary-300: var(--secondary-color);
  --primary-100: color-mix(in srgb, var(--primary-color) 70%, white);

  --accent-500: var(--accent-color);
  --accent-300: color-mix(in srgb, var(--accent-color) 85%, white);
  --accent-100: color-mix(in srgb, var(--accent-color) 70%, white);

  /* Text colors */
  --text-primary: var(--primary-500);
  --text-secondary: var(--primary-300);
  --text-accent: var(--accent-500);

  /* Border colors */
  --border-color: color-mix(
    in srgb,
    var(--primary-color) 20%,
    var(--background-color)
  );

  /* Button colors */
  --button-bg: var(--primary-color);
  --button-hover-bg: var(--secondary-color);
  --button-text: var(--background-color);

  /* Animation duration variables */
  --transition-duration: 0.2s;
  --transition-duration-fast: 0.15s;

  /* Focus styles */
  --focus-outline-color: var(--accent-500);
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-outline-style: solid;
  --focus-ring-color: color-mix(in srgb, var(--accent-500) 25%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration: 0.001s;
    --transition-duration-fast: 0.001s;
  }
}

.btn-outline.button,
.btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--accent-500) !important;
  border: 4px solid var(--accent-500);
}

.btn-outline.button:hover,
.btn-outline .wp-block-button__link:hover {
  color: var(--accent-100) !important;
}