@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/buttons.css

@@ -1,683 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Buttons
- *
- *  Responsibilities:
- *    - Provide a fully tokenised, theme-respecting button engine
- *    - Define consistent sizing, spacing, radii, and layout primitives
- *    - Expose semantic (primary/secondary), status (success/warning/info/danger),
- *      outline, ghost, soft, subtle, and link variants
- *    - Support interactive states: hover, active, pressed, selected, disabled,
- *      and loading (pure CSS spinner)
- *    - Maintain predictable focus, accessibility, and reduced-motion behaviour
- *
- *  System Notes:
- *    - Pure CSS; no JS needed for pressed, disabled, or loading patterns
- *    - Strictly token-driven: all color, motion, and border values originate from
- *      primitives + active theme (Carbon, Graphite, Navy, Slate, Titanium)
- *    - Suitable for <button>, <a>, and role="button" elements with full ARIA support
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. BASE BUTTON
---------------------------------------------------------- */
-
-.button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
-    padding-top: var(--space-2_5);
-    padding-bottom: var(--space-2_5);
-    padding-left: var(--space-5);
-    padding-right: var(--space-5);
-    border-radius: var(--radius-md);
-    border-width: var(--border-width);
-    border-style: solid;
-    font-family: inherit;
-    font-size: var(--text-sm);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-xl-tight);
-    background: var(--color-surface);
-    border-color: var(--color-border-subtle);
-    color: var(--color-text);
-    cursor: pointer;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    white-space: normal;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast);
-}
-
-.button:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-.button:hover:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-surface-subtle, var(--color-muted-bg));
-}
-
-.button:active:not(:disabled):not([aria-disabled="true"]) {
-    transform: translateY(1px);
-    background: var(--color-surface-subtle, var(--color-muted-bg));
-    border-color: var(--color-border-strong, var(--color-border-subtle));
-}
-
-.button:disabled,
-.button[aria-disabled="true"] {
-    opacity: 0.6;
-    cursor: not-allowed;
-    box-shadow: none;
-    transform: none;
-    background-color: var(--color-surface-subtle);
-    color: var(--color-text-muted);
-    border-color: var(--color-border-subtle);
-}
-
-.button--selected,
-.button[aria-pressed="true"] {
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-/* ---------------------------------------------------------
-   2. SIZE SCALE
---------------------------------------------------------- */
-
-.button--sm {
-    padding-top: var(--space-1_5);
-    padding-bottom: var(--space-1_5);
-    padding-left: var(--space-3);
-    padding-right: var(--space-3);
-}
-
-.button--md {
-    padding-top: var(--space-2_5);
-    padding-bottom: var(--space-2_5);
-    padding-left: var(--space-5);
-    padding-right: var(--space-5);
-}
-
-.button--lg {
-    padding-top: var(--space-3_5);
-    padding-bottom: var(--space-3_5);
-    padding-left: var(--space-7);
-    padding-right: var(--space-7);
-}
-
-.button--nowrap {
-    white-space: nowrap;
-}
-
-/* ---------------------------------------------------------
-   3. LAYOUT MODIFIERS
---------------------------------------------------------- */
-
-.button--block {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-}
-
-.button--full-height {
-    height: 100%;
-}
-
-.button--icon {
-    padding: var(--space-2);
-    min-width: var(--space-8);
-    min-height: var(--space-8);
-    border-radius: var(--radius-full);
-}
-
-.button__icon {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.button__icon--left {
-    margin-right: var(--space-2);
-}
-
-.button__icon--right {
-    margin-left: var(--space-2);
-}
-
-/* ---------------------------------------------------------
-   4. NEUTRAL / SEMANTIC VARIANTS
---------------------------------------------------------- */
-
-.button--primary {
-    background: var(--color-accent);
-    border-color: var(--color-accent-strong);
-    color: var(--color-on-accent);
-}
-
-.button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-accent-strong);
-    border-color: var(--color-accent-strong);
-}
-
-.button--primary:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-accent-strong);
-    border-color: var(--color-accent-strong);
-}
-
-.button--primary:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-accent-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-.button--primary:active:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-accent-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-.button--secondary {
-    background: var(--color-surface);
-    border-color: var(--color-border-subtle);
-    color: var(--color-text);
-}
-
-.button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-surface-subtle, var(--color-muted-bg));
-    border-color: var(--color-border-subtle);
-}
-
-.button--secondary:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-surface-subtle, var(--color-muted-bg));
-    border-color: var(--color-border-strong, var(--color-border-subtle));
-}
-
-.button--secondary:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-.button--soft {
-    background-color: var(--color-surface-subtle);
-    border-color: var(--button-soft-border, var(--color-border-subtle));
-    color: var(--button-soft-text, var(--color-text));
-}
-
-.button--soft:hover:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-accent-soft-hover, var(--color-accent-soft));
-    border-color: var(--button-soft-border-hover, var(--color-border-strong));
-}
-
-.button--soft:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-accent-soft-hover, var(--color-accent-soft));
-    border-color: transparent;
-}
-
-.button--soft:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-accent-soft),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-.button--ghost {
-    background: transparent;
-    border-color: transparent;
-    color: var(--color-text);
-}
-
-.button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-muted-bg);
-    border-color: transparent;
-}
-
-.button--ghost:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-muted-bg);
-    border-color: transparent;
-}
-
-.button--ghost:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-muted-bg),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-.button--subtle {
-    background: transparent;
-    border-color: transparent;
-    color: var(--color-text-muted);
-}
-
-.button--subtle:hover:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-muted-bg);
-    color: var(--color-text);
-}
-
-.button--subtle:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-muted-bg);
-    color: var(--color-text);
-}
-
-.button--subtle:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-muted-bg),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-/* ---------------------------------------------------------
-   5. STATUS VARIANTS (SOLID)
---------------------------------------------------------- */
-
-.button--success {
-    background: var(--color-success);
-    border-color: var(--color-success-strong);
-    color: var(--color-on-success);
-}
-
-.button--success:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--success-soft-surface-strong, var(--color-success-soft-hover));
-    border-color: var(--color-success-strong);
-    color: var(--success-soft-on);
-}
-
-.button--success:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-success-strong);
-    border-color: var(--color-success-strong);
-}
-
-.button--success:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-success-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-success-soft));
-}
-
-.button--warning {
-    background: var(--color-warning);
-    border-color: var(--color-warning-strong);
-    color: var(--color-on-warning);
-}
-
-.button--warning:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--warning-soft-surface-strong, var(--color-warning-soft-hover));
-    border-color: var(--color-warning-strong);
-    color: var(--warning-soft-on);
-}
-
-.button--warning:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-warning-strong);
-    border-color: var(--color-warning-strong);
-}
-
-.button--warning:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-warning-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-warning-soft));
-}
-
-.button--info {
-    background: var(--color-info);
-    border-color: var(--color-info-strong);
-    color: var(--color-on-info);
-}
-
-.button--info:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--info-soft-surface-strong, var(--color-info-soft-hover));
-    border-color: var(--color-info-strong);
-    color: var(--info-soft-on);
-}
-
-.button--info:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-info-strong);
-    border-color: var(--color-info-strong);
-}
-
-.button--info:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-info-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-info-soft));
-}
-
-.button--danger {
-    background: var(--color-danger);
-    border-color: var(--color-danger-strong);
-    color: var(--color-on-danger);
-}
-
-.button--danger:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--danger-soft-surface-strong, var(--color-danger-soft-hover));
-    border-color: var(--color-danger-strong);
-    color: var(--danger-soft-on);
-}
-
-.button--danger:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-danger-strong);
-    border-color: var(--color-danger-strong);
-}
-
-.button--danger:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-danger-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-danger-soft));
-}
-
-/* ---------------------------------------------------------
-   6. OUTLINE VARIANTS
---------------------------------------------------------- */
-
-.button--outline {
-    background: transparent;
-    border-color: var(--color-border-subtle);
-    color: var(--color-text);
-}
-
-.button--outline:hover:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-surface-subtle, var(--color-muted-bg));
-    border-color: var(--color-border-strong, var(--color-border-subtle));
-}
-
-.button--outline:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-surface-subtle, var(--color-muted-bg));
-    border-color: var(--color-border-strong, var(--color-border-subtle));
-}
-
-.button--outline:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-border-strong, var(--color-border-subtle)),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-.button--outline-accent {
-    background: transparent;
-    border-color: var(--color-accent);
-    color: var(--color-accent);
-}
-
-.button--outline-accent:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--button-outline-accent-hover-bg);
-    border-color: var(--button-outline-accent-hover-border, var(--color-accent-strong));
-}
-
-.button--outline-accent:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-accent-soft);
-    border-color: var(--color-accent-strong);
-}
-
-.button--outline-accent:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-accent-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-.button--outline-danger {
-    background: transparent;
-    border-color: var(--color-danger);
-    color: var(--color-danger);
-}
-
-.button--outline-danger:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--button-outline-danger-hover-bg);
-    border-color: var(--button-outline-danger-hover-border, var(--color-danger-strong));
-}
-
-.button--outline-danger:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-danger-soft);
-    border-color: var(--color-danger-strong);
-}
-
-.button--outline-danger:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-danger-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-danger-soft));
-}
-
-.button--outline-success {
-    background: transparent;
-    border-color: var(--color-success);
-    color: var(--color-success);
-}
-
-.button--outline-success:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--button-outline-success-hover-bg);
-    border-color: var(--button-outline-success-hover-border, var(--color-success-strong));
-}
-
-.button--outline-success:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-success-soft);
-    border-color: var(--color-success-strong);
-}
-
-.button--outline-success:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-success-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-success-soft));
-}
-
-.button--outline-warning {
-    background: transparent;
-    border-color: var(--color-warning);
-    color: var(--color-warning);
-}
-
-.button--outline-warning:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--button-outline-warning-hover-bg);
-    border-color: var(--button-outline-warning-hover-border, var(--color-warning-strong));
-}
-
-.button--outline-warning:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-warning-soft);
-    border-color: var(--color-warning-strong);
-}
-
-.button--outline-warning:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-warning-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-warning-soft));
-}
-
-.button--outline-info {
-    background: transparent;
-    border-color: var(--color-info);
-    color: var(--color-info);
-}
-
-.button--outline-info:hover:not(:disabled):not([aria-disabled="true"]) {
-    background-color: var(--button-outline-info-hover-bg);
-    border-color: var(--button-outline-info-hover-border, var(--color-info-strong));
-}
-
-.button--outline-info:active:not(:disabled):not([aria-disabled="true"]) {
-    background: var(--color-info-soft);
-    border-color: var(--color-info-strong);
-}
-
-.button--outline-info:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-info-strong),
-    0 0 0 3px var(--focus-ring-color, var(--color-info-soft));
-}
-
-/* ---------------------------------------------------------
-   7. LINK BUTTON
---------------------------------------------------------- */
-
-.button--link {
-    background: transparent;
-    border-color: transparent;
-    color: var(--color-accent);
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    font-weight: 500;
-}
-
-.button--link:hover:not(:disabled):not([aria-disabled="true"]) {
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    background: transparent;
-}
-
-.button--link:active:not(:disabled):not([aria-disabled="true"]) {
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    background: transparent;
-}
-
-.button--link:focus-visible {
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    box-shadow: 0 0 0 1px transparent,
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-.button--link:disabled,
-.button--link[aria-disabled="true"] {
-    opacity: 0.6;
-    cursor: not-allowed;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-}
-
-/* ---------------------------------------------------------
-   8. LOADING STATE
---------------------------------------------------------- */
-
-.button--loading {
-    position: relative;
-    pointer-events: none;
-}
-
-.button--loading > * {
-    visibility: hidden;
-}
-
-.button--loading::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: auto;
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-    border: 2px solid currentColor;
-    border-top-color: transparent;
-    animation: button-spinner 0.8s linear infinite;
-}
-
-.button--loading:focus-visible {
-    box-shadow: 0 0 0 1px var(--color-surface),
-    0 0 0 3px var(--focus-ring-color, var(--color-accent-soft));
-}
-
-@keyframes button-spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* ---------------------------------------------------------
-   9. REDUCED MOTION
---------------------------------------------------------- */
-
-@media (prefers-reduced-motion: reduce) {
-    .button {
-        transition: none;
-    }
-
-    .button--loading::after {
-        animation: none;
-        border-top-color: currentColor;
-    }
-}
-
-/* ---------------------------------------------------------
-   10. HELPERS
---------------------------------------------------------- */
-
-.button--contrast-hover:hover:not(:disabled):not([aria-disabled="true"]) {
-    background: rgba(0, 0, 0, 0.12);
-    border-color: currentColor;
-}
-
-/* ---------------------------------------------------------
-   11. LINK RESETS
---------------------------------------------------------- */
-
-a.button,
-a.button:hover,
-a.button:focus,
-a.button:active {
-    color: inherit;
-    -webkit-text-decoration: none;
-    text-decoration: none;
-}
-
-a.button[aria-disabled="true"],
-a.button[aria-disabled="true"]:hover,
-a.button[aria-disabled="true"]:focus,
-a.button[aria-disabled="true"]:active {
-    pointer-events: none;
-    color: var(--color-text-muted);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-}
-
-a.button--primary,
-a.button--primary:hover,
-a.button--primary:focus,
-a.button--primary:active {
-    color: var(--color-on-accent);
-}
-
-a.button--secondary,
-a.button--secondary:hover,
-a.button--secondary:focus,
-a.button--secondary:active {
-    color: var(--color-accent-strong);
-}
-
-a.button--ghost,
-a.button--ghost:hover,
-a.button--ghost:focus,
-a.button--ghost:active {
-    color: var(--color-accent-soft);
-}
-
-a.button--subtle,
-a.button--subtle:hover,
-a.button--subtle:focus,
-a.button--subtle:active {
-    color: var(--color-text);
-}
-
-a.button--neutral,
-a.button--neutral:hover,
-a.button--neutral:focus,
-a.button--neutral:active {
-    color: var(--color-text-on-soft);
-}
-
-a.button--danger,
-a.button--danger:hover,
-a.button--danger:focus,
-a.button--danger:active {
-    color: var(--color-on-danger);
-}
-
-a.button--warning,
-a.button--warning:hover,
-a.button--warning:focus,
-a.button--warning:active {
-    color: var(--color-on-warning);
-}
-
-a.button--success,
-a.button--success:hover,
-a.button--success:focus,
-a.button--success:active {
-    color: var(--color-on-success);
-}
-
-a.button--info,
-a.button--info:hover,
-a.button--info:focus,
-a.button--info:active {
-    color: var(--color-on-info);
-}
-
-a.button:hover {
-    -webkit-text-decoration: none;
-    text-decoration: none;
-}
+.button{align-items:center;background:var(--color-surface);border-color:var(--color-border-subtle);border-radius:var(--radius-md);border-style:solid;border-width:var(--border-width);color:var(--color-text);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-weight-medium);gap:var(--space-2);justify-content:center;line-height:var(--line-height-xl-tight);padding:var(--space-2_5) var(--space-5);-webkit-text-decoration:none;text-decoration:none;transition:background-color var(--transition-normal),border-color var(--transition-normal),color var(--transition-normal),box-shadow var(--transition-normal),transform var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:normal}.button:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft));outline:none}.button:active:not(:disabled):not([aria-disabled=true]),.button:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg))}.button:active:not(:disabled):not([aria-disabled=true]){border-color:var(--color-border-strong,var(--color-border-subtle));transform:translateY(1px)}.button:disabled,.button[aria-disabled=true]{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);box-shadow:none;color:var(--color-text-muted);cursor:not-allowed;opacity:.6;transform:none}.button--selected,.button[aria-pressed=true]{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--sm{padding:var(--space-1_5) var(--space-3)}.button--md{padding:var(--space-2_5) var(--space-5)}.button--lg{padding:var(--space-3_5) var(--space-7)}.button--nowrap{white-space:nowrap}.button--block{align-items:center;display:flex;justify-content:center;width:100%}.button--full-height{height:100%}.button--icon{border-radius:var(--radius-full);min-height:var(--space-8);min-width:var(--space-8);padding:var(--space-2)}.button__icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.button__icon--left{margin-right:var(--space-2)}.button__icon--right{margin-left:var(--space-2)}.button--primary{background:var(--color-accent);border-color:var(--color-accent-strong);color:var(--color-on-accent)}.button--primary:active:not(:disabled):not([aria-disabled=true]),.button--primary:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-strong);border-color:var(--color-accent-strong)}.button--primary:focus-visible{box-shadow:0 0 0 1px var(--color-accent-strong),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--primary:active:focus-visible{box-shadow:0 0 0 1px var(--color-accent-strong),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--secondary{background:var(--color-surface);border-color:var(--color-border-subtle);color:var(--color-text)}.button--secondary:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg));border-color:var(--color-border-subtle)}.button--secondary:active:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg));border-color:var(--color-border-strong,var(--color-border-subtle))}.button--secondary:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--soft{background-color:var(--color-surface-subtle);border-color:var(--button-soft-border,var(--color-border-subtle));color:var(--button-soft-text,var(--color-text))}.button--soft:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-soft-hover,var(--color-accent-soft));border-color:var(--button-soft-border-hover,var(--color-border-strong))}.button--soft:active:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-soft-hover,var(--color-accent-soft));border-color:transparent}.button--soft:focus-visible{box-shadow:0 0 0 1px var(--color-accent-soft),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--ghost{background:transparent;border-color:transparent;color:var(--color-text)}.button--ghost:active:not(:disabled):not([aria-disabled=true]),.button--ghost:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-muted-bg);border-color:transparent}.button--ghost:focus-visible{box-shadow:0 0 0 1px var(--color-muted-bg),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--subtle{background:transparent;border-color:transparent;color:var(--color-text-muted)}.button--subtle:active:not(:disabled):not([aria-disabled=true]),.button--subtle:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-muted-bg);color:var(--color-text)}.button--subtle:focus-visible{box-shadow:0 0 0 1px var(--color-muted-bg),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--success{background:var(--color-success);border-color:var(--color-success-strong);color:var(--color-on-success)}.button--success:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--success-soft-surface-strong,var(--color-success-soft-hover));border-color:var(--color-success-strong);color:var(--success-soft-on)}.button--success:active:not(:disabled):not([aria-disabled=true]){background:var(--color-success-strong);border-color:var(--color-success-strong)}.button--success:focus-visible{box-shadow:0 0 0 1px var(--color-success-strong),0 0 0 3px var(--focus-ring-color,var(--color-success-soft))}.button--warning{background:var(--color-warning);border-color:var(--color-warning-strong);color:var(--color-on-warning)}.button--warning:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--warning-soft-surface-strong,var(--color-warning-soft-hover));border-color:var(--color-warning-strong);color:var(--warning-soft-on)}.button--warning:active:not(:disabled):not([aria-disabled=true]){background:var(--color-warning-strong);border-color:var(--color-warning-strong)}.button--warning:focus-visible{box-shadow:0 0 0 1px var(--color-warning-strong),0 0 0 3px var(--focus-ring-color,var(--color-warning-soft))}.button--info{background:var(--color-info);border-color:var(--color-info-strong);color:var(--color-on-info)}.button--info:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--info-soft-surface-strong,var(--color-info-soft-hover));border-color:var(--color-info-strong);color:var(--info-soft-on)}.button--info:active:not(:disabled):not([aria-disabled=true]){background:var(--color-info-strong);border-color:var(--color-info-strong)}.button--info:focus-visible{box-shadow:0 0 0 1px var(--color-info-strong),0 0 0 3px var(--focus-ring-color,var(--color-info-soft))}.button--danger{background:var(--color-danger);border-color:var(--color-danger-strong);color:var(--color-on-danger)}.button--danger:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--danger-soft-surface-strong,var(--color-danger-soft-hover));border-color:var(--color-danger-strong);color:var(--danger-soft-on)}.button--danger:active:not(:disabled):not([aria-disabled=true]){background:var(--color-danger-strong);border-color:var(--color-danger-strong)}.button--danger:focus-visible{box-shadow:0 0 0 1px var(--color-danger-strong),0 0 0 3px var(--focus-ring-color,var(--color-danger-soft))}.button--outline{background:transparent;border-color:var(--color-border-subtle);color:var(--color-text)}.button--outline:active:not(:disabled):not([aria-disabled=true]),.button--outline:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-subtle,var(--color-muted-bg));border-color:var(--color-border-strong,var(--color-border-subtle))}.button--outline:focus-visible{box-shadow:0 0 0 1px var(--color-border-strong,var(--color-border-subtle)),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--outline-accent{background:transparent;border-color:var(--color-accent);color:var(--color-accent)}.button--outline-accent:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-accent-hover-bg);border-color:var(--button-outline-accent-hover-border,var(--color-accent-strong))}.button--outline-accent:active:not(:disabled):not([aria-disabled=true]){background:var(--color-accent-soft);border-color:var(--color-accent-strong)}.button--outline-accent:focus-visible{box-shadow:0 0 0 1px var(--color-accent-strong),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}.button--outline-danger{background:transparent;border-color:var(--color-danger);color:var(--color-danger)}.button--outline-danger:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-danger-hover-bg);border-color:var(--button-outline-danger-hover-border,var(--color-danger-strong))}.button--outline-danger:active:not(:disabled):not([aria-disabled=true]){background:var(--color-danger-soft);border-color:var(--color-danger-strong)}.button--outline-danger:focus-visible{box-shadow:0 0 0 1px var(--color-danger-strong),0 0 0 3px var(--focus-ring-color,var(--color-danger-soft))}.button--outline-success{background:transparent;border-color:var(--color-success);color:var(--color-success)}.button--outline-success:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-success-hover-bg);border-color:var(--button-outline-success-hover-border,var(--color-success-strong))}.button--outline-success:active:not(:disabled):not([aria-disabled=true]){background:var(--color-success-soft);border-color:var(--color-success-strong)}.button--outline-success:focus-visible{box-shadow:0 0 0 1px var(--color-success-strong),0 0 0 3px var(--focus-ring-color,var(--color-success-soft))}.button--outline-warning{background:transparent;border-color:var(--color-warning);color:var(--color-warning)}.button--outline-warning:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-warning-hover-bg);border-color:var(--button-outline-warning-hover-border,var(--color-warning-strong))}.button--outline-warning:active:not(:disabled):not([aria-disabled=true]){background:var(--color-warning-soft);border-color:var(--color-warning-strong)}.button--outline-warning:focus-visible{box-shadow:0 0 0 1px var(--color-warning-strong),0 0 0 3px var(--focus-ring-color,var(--color-warning-soft))}.button--outline-info{background:transparent;border-color:var(--color-info);color:var(--color-info)}.button--outline-info:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--button-outline-info-hover-bg);border-color:var(--button-outline-info-hover-border,var(--color-info-strong))}.button--outline-info:active:not(:disabled):not([aria-disabled=true]){background:var(--color-info-soft);border-color:var(--color-info-strong)}.button--outline-info:focus-visible{box-shadow:0 0 0 1px var(--color-info-strong),0 0 0 3px var(--focus-ring-color,var(--color-info-soft))}.button--link{background:transparent;border-color:transparent;color:var(--color-accent);font-weight:500;padding:0}.button--link:active:not(:disabled):not([aria-disabled=true]),.button--link:hover:not(:disabled):not([aria-disabled=true]){background:transparent;-webkit-text-decoration:underline;text-decoration:underline}.button--link:focus-visible{box-shadow:0 0 0 1px transparent,0 0 0 3px var(--focus-ring-color,var(--color-accent-soft));-webkit-text-decoration:underline;text-decoration:underline}.button--link:disabled,.button--link[aria-disabled=true]{cursor:not-allowed;opacity:.6;-webkit-text-decoration:none;text-decoration:none}.button--loading{pointer-events:none;position:relative}.button--loading>*{visibility:hidden}.button--loading:after{animation:button-spinner .8s linear infinite;border:2px solid;border-radius:50%;border-top:2px solid transparent;bottom:0;content:"";height:1em;left:0;margin:auto;position:absolute;right:0;top:0;width:1em}.button--loading:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color,var(--color-accent-soft))}@keyframes button-spinner{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.button{transition:none}.button--loading:after{animation:none;border-top-color:currentColor}}.button--contrast-hover:hover:not(:disabled):not([aria-disabled=true]){background:rgba(0,0,0,.12);border-color:currentColor}a.button,a.button:active,a.button:focus,a.button:hover{color:inherit;-webkit-text-decoration:none;text-decoration:none}a.button[aria-disabled=true],a.button[aria-disabled=true]:active,a.button[aria-disabled=true]:focus,a.button[aria-disabled=true]:hover{color:var(--color-text-muted);pointer-events:none;-webkit-text-decoration:none;text-decoration:none}a.button--primary,a.button--primary:active,a.button--primary:focus,a.button--primary:hover{color:var(--color-on-accent)}a.button--secondary,a.button--secondary:active,a.button--secondary:focus,a.button--secondary:hover{color:var(--color-accent-strong)}a.button--ghost,a.button--ghost:active,a.button--ghost:focus,a.button--ghost:hover{color:var(--color-accent-soft)}a.button--subtle,a.button--subtle:active,a.button--subtle:focus,a.button--subtle:hover{color:var(--color-text)}a.button--neutral,a.button--neutral:active,a.button--neutral:focus,a.button--neutral:hover{color:var(--color-text-on-soft)}a.button--danger,a.button--danger:active,a.button--danger:focus,a.button--danger:hover{color:var(--color-on-danger)}a.button--warning,a.button--warning:active,a.button--warning:focus,a.button--warning:hover{color:var(--color-on-warning)}a.button--success,a.button--success:active,a.button--success:focus,a.button--success:hover{color:var(--color-on-success)}a.button--info,a.button--info:active,a.button--info:focus,a.button--info:hover{color:var(--color-on-info)}a.button:hover{-webkit-text-decoration:none;text-decoration:none}