a {
    color: var(--color-primary);
    text-decoration: none;
}
a:hover {
    color: var(--color-primary-variant);
    text-decoration: underline;
}
a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--button-border-radius);
    color: var(--color-tertiary);
}
.primary-button {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border: none;
    width: calc(250px + 22px);
    padding: 11px;
    font-size: 16px;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    transition: background-color 0.3s;
}
.primary-button:hover {
    background-color: var(--color-primary-fixed);
    color: var(--color-on-primary);
}
.primary-button:focus {
    background-color: var(--color-surface-bright);
    color: var(--color-on-surface);
}
.danger-button {
    background-color: var(--color-error);
    color: var(--color-on-error);
    border: none;
    width: calc(250px + 22px);
    padding: 11px;
    font-size: 16px;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
.danger-button:hover {
    background-color: var(--color-error-container);
    color: var(--color-on-error-container);
}
.danger-button:focus {
    background-color: var(--color-surface-bright);
    color: var(--color-on-surface);
}