/* Components/Shared/Button.razor — link-styled-as-button for marketing CTAs.
 *
 * Global rather than scoped, so every selector is qualified with the `a` the
 * component actually renders. `btn` and `btn-primary` are generic enough to
 * appear in the stored page HTML that ContentPage emits verbatim, and without
 * the element qualifier this file would restyle that markup too.
 *
 * The --color-* / --space-* / --radius- * custom properties came from the
 * deleted css/tokens.css and are undefined at runtime, so the declarations
 * using them are dropped by the parser — exactly as they already were under
 * CSS isolation. The compiled Tailwind bundle's own .btn-primary and
 * .btn-secondary rules carry !important and win over these regardless. Left as
 * authored rather than trimmed, so restoring the tokens restores the design. */

a.btn {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color 120ms ease, color 120ms ease;
}

a.btn:focus-visible {
    outline: 3px solid var(--color-indigo);
    outline-offset: 3px;
}

a.btn-primary {
    background: var(--color-violet);
    color: #fff;
}

a.btn-primary:hover {
    background: var(--color-indigo);
}

a.btn-secondary {
    background: var(--color-gold);
    color: var(--color-ink);
}

a.btn-secondary:hover {
    filter: brightness(0.95);
}

a.btn-ghost {
    background: transparent;
    color: var(--color-violet);
    border-color: var(--color-violet);
}

a.btn-ghost:hover {
    background: var(--color-violet);
    color: #fff;
}