:root {
    
    /* Base primary color */
    --bulma-primary: #ab2328;
    --bulma-link: var(--bulma-primary);

    /* Text and background colors */
    --bulma-text: #000;
    --bulma-background: #fff;
    --bulma-text-strong: var(--bulma-text);

    /* Text colors for primary elements */
    --bulma-primary-invert: #fff;
    --bulma-primary-light: #d94449;
    --bulma-primary-dark: #59051a;

    /* For hover/active states */
    --bulma-primary-light-invert: #0A0A2A;
    --bulma-primary-dark-invert: var(--bulma-background);
}

.hero-text-wrapper {
    background: hsla(360 100% 100% / 0.8);
    border-radius: 15px;
    padding: 16px 16px 16px 0px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bulma-text: #fff;
        --bulma-background: #000;
        --bulma-text-strong: var(--bulma-text);
    }

    .hero-text-wrapper h1,
    .hero-text-wrapper p,
    .hero-text-wrapper li {
        color: #000;
    }
}

[data-theme=dark],
.theme-dark {
    --bulma-text: #fff;
    --bulma-background: #000;
    --bulma-text-strong: var(--bulma-text);
}

.button.is-primary {
    background-color: var(--bulma-primary);
    color: var(--bulma-primary-invert);
}

.button.is-primary:hover,
.button.is-primary:focus {
  background-color: var(--bulma-primary-dark);
  color: var(--bulma-primary-dark-invert);
}

.button.is-primary:active {
  background-color: var(--bulma-primary-dark);
}

/* WCAG 2.2 AAA Focus Indicators (2.4.13) */
*:focus-visible {
    outline: 3px solid #ab2328;
    outline-offset: 2px;
    border-radius: 2px;
}

/* High contrast focus on primary buttons */
.button.is-primary:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* Dark mode focus adjustments */
@media (prefers-color-scheme: dark) {
    *:focus-visible {
        outline-color: #d94449;
    }

    .button.is-primary:focus-visible {
        outline-color: #fff;
    }
}

/* Respect user preference for reduced motion (WCAG 2.3.3 AAA) */
@media (prefers-reduced-motion: reduce) {
    .button.is-primary:hover,
    .button.is-primary:focus,
    * {
        transition: none !important;
        animation: none !important;
    }
}