/* Shared contracts. Values live in tokens.json, not in consumer components. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; font-family: var(--sp-font-family); font-synthesis: none; color: var(--sp-color-text); background: var(--sp-color-canvas); font-size: var(--sp-text-body); line-height: var(--sp-line-body); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { touch-action: manipulation; }
a { color: inherit; text-underline-offset: .25em; }
button, input, select, textarea { caret-color: var(--sp-color-action); }
:focus-visible { outline: 2px solid var(--sp-color-focus); outline-offset: 4px; }
::selection { background: var(--sp-color-info-bg); color: var(--sp-color-info); }
[hidden] { display: none !important; }
.sp-button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--sp-control-height); padding: .65rem 1.1rem; border: 1px solid transparent; border-radius: var(--sp-radius-control); color: var(--sp-color-on-action); background: var(--sp-color-action); font-weight: 700; line-height: 1.25; text-decoration: none; transition: background var(--sp-duration-feedback), color var(--sp-duration-feedback); }
.sp-button:hover { background: var(--sp-color-action-hover); }
.sp-button--secondary { color: var(--sp-color-text); background: var(--sp-color-panel); border-color: var(--sp-color-control-border); }
.sp-button--secondary:hover { background: var(--sp-color-subtle); }
.sp-button--quiet { color: var(--sp-color-text); background: transparent; }
.sp-button--quiet:hover { background: var(--sp-color-subtle); }
.sp-button--danger { background: var(--sp-color-danger); color: var(--sp-color-canvas); }
.sp-button:disabled { opacity: .5; cursor: not-allowed; }
.sp-button[aria-busy="true"] { cursor: progress; }
.sp-field { display: grid; gap: .5rem; }
.sp-field label { font-weight: 700; }
.sp-input { width: 100%; min-height: var(--sp-control-height); padding: .7rem .8rem; color: var(--sp-color-text); background: var(--sp-color-panel); border: 1px solid var(--sp-color-control-border); border-radius: var(--sp-radius-control); font-size: 1rem; }
.sp-input::placeholder { color: var(--sp-color-secondary); opacity: 1; }
.sp-input[aria-invalid="true"] { border-color: var(--sp-color-danger); }
.sp-help { margin: 0; color: var(--sp-color-secondary); font-size: .875rem; }
.sp-error { color: var(--sp-color-danger); font-size: .875rem; margin: 0; }
.sp-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: var(--sp-radius-badge); font-size: .75rem; font-weight: 700; white-space: nowrap; color: var(--sp-color-secondary); background: var(--sp-color-subtle); }
.sp-badge[data-tone="success"] { color: var(--sp-color-success); background: var(--sp-color-success-bg); }
.sp-badge[data-tone="warning"] { color: var(--sp-color-warning); background: var(--sp-color-warning-bg); }
.sp-badge[data-tone="danger"] { color: var(--sp-color-danger); background: var(--sp-color-danger-bg); }
.sp-badge[data-tone="info"] { color: var(--sp-color-info); background: var(--sp-color-info-bg); }
.sp-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-numerals { font-variant-numeric: tabular-nums; }
.sp-status { padding: 1rem; color: var(--sp-color-info); background: var(--sp-color-info-bg); border-radius: var(--sp-radius-control); }
.skip { position: absolute; left: 1rem; top: -6rem; z-index: 20; }
.skip:focus { top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }