@layer components{.button{--button-h:var(--control-h-md);justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--button-h);padding:0 var(--space-6);border-radius:var(--radius-pill);color:var(--color-ink);font:inherit;font-size:var(--text-md);font-weight:var(--font-weight-medium);line-height:var(--leading-none);white-space:nowrap;cursor:pointer;transition:background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), filter var(--duration) var(--ease);background:0 0;border:1px solid #0000;text-decoration:none;display:inline-flex}.button--primary{background:var(--color-navy);color:var(--color-inverse)}.button--secondary{border-color:var(--color-line-strong);background:var(--color-surface)}.button--outline{border-color:var(--color-navy);color:var(--color-navy)}.button--ghost{color:var(--color-ink-soft)}.button--danger{border-color:var(--color-danger);background:var(--color-danger-soft);color:var(--color-danger-text)}.button--on-color{border-color:var(--color-inverse-line);background:var(--color-inverse-soft);color:var(--color-inverse)}.button--on-media{border-color:var(--color-line);background:var(--color-surface-translucent);color:var(--color-ink);box-shadow:var(--shadow-media);-webkit-backdrop-filter:blur(var(--blur-media));backdrop-filter:blur(var(--blur-media))}.button--primary:not(:disabled,[aria-disabled=true]):hover{background:var(--color-navy-raised)}.surface-navy .button--primary{background:var(--color-inverse);color:var(--color-navy)}.surface-navy .button--primary:not(:disabled,[aria-disabled=true]):hover{background:var(--color-navy-muted)}.surface-navy .button--secondary{border-color:var(--color-inverse-line);color:var(--color-inverse);background:0 0}.surface-navy .button--secondary:not(:disabled,[aria-disabled=true]):hover{background:var(--color-inverse-soft)}.button:where(.button--secondary,.button--outline,.button--danger):not(:disabled,[aria-disabled=true]):hover{filter:var(--filter-hover)}.button--ghost:not(:disabled,[aria-disabled=true]):hover{background:var(--color-panel);color:var(--color-ink)}.button--ghost[aria-pressed=true]{background:var(--color-brand-soft);color:var(--color-brand-text)}.button--on-color:not(:disabled,[aria-disabled=true]):hover{background:var(--color-inverse-soft-strong)}.button--on-media:not(:disabled,[aria-disabled=true]):hover{background:var(--color-surface);color:var(--color-brand-text)}.button:is(:disabled,[aria-disabled=true]){opacity:var(--opacity-disabled);pointer-events:none;cursor:not-allowed}.button--xs{--button-h:var(--control-h-xs);padding-inline:var(--space-3);font-size:var(--text-xs)}.button--sm{--button-h:var(--control-h-sm);padding-inline:var(--space-4);font-size:var(--text-sm)}.button--multiline{padding-block:var(--space-2);line-height:var(--leading-snug);text-align:left;white-space:normal;overflow-wrap:anywhere;justify-content:flex-start}.button--icon{width:var(--button-h);min-width:var(--button-h);height:var(--button-h);padding:0}.button-text{align-items:center;gap:var(--space-1);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.button-text--text{color:var(--color-brand-text);font-weight:var(--font-weight-semibold);text-decoration:underline}.button-text--text-muted{color:var(--color-muted)}.button-text--text-muted:not(:disabled,[aria-disabled=true]):hover{color:var(--color-ink)}.button-text--xs{font-size:var(--text-xs)}.button-text--sm{font-size:var(--text-sm)}.button-text:is(:disabled,[aria-disabled=true]){color:var(--color-muted);cursor:default;text-decoration:none}}
