@import url('./design-tokens.css');
/* Keep Shot primitives: templates supply semantic colours, components keep their behaviour. */
:root {
}
.ks-button {
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:13px 23px;border:1px solid var(--ks-border,#ffffff35);
  border-radius:var(--ks-radius-control);background:transparent;color:var(--ks-ink,#ecebe7);
  font:500 14px/1.4 Inter,sans-serif;text-decoration:none;cursor:pointer;
  transition:background var(--ks-duration),border-color var(--ks-duration),box-shadow var(--ks-duration);
}
.ks-button--primary {background:var(--ks-ink,#ecebe7);color:var(--ks-paper,#111412);border-color:transparent}
.ks-button:hover {box-shadow:0 0 26px color-mix(in srgb,var(--ks-focus) 20%,transparent);border-color:var(--ks-focus)}
.ks-button--icon {padding:0;width:48px;flex-shrink:0}
.ks-button:focus-visible {outline:2px solid var(--ks-focus);outline-offset:4px}
.ks-button:active {border-radius:var(--ks-radius-control);transform:none}
@media(prefers-reduced-motion:reduce){.ks-button{transition:none}}