/* kukudze base: reset, type, links, focus, buttons, forms, tables, badges. Values come from tokens.css. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + var(--space-16)); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-page); color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: var(--line-height-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; display: block; }
main:focus { outline: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }

/* ---------- Type scale (brand book chapter 08, sizes switch in tokens.css) ---------- */
h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 { font-family: var(--font-display); color: var(--color-text); text-wrap: balance; }
/* Display tracking: the token is -3px at 96px. Scaled as -0.03125em so the 44px phone size keeps the same ratio (exact -3px at 1440). */
.display { font-size: var(--font-size-display); font-weight: var(--font-weight-display); line-height: var(--line-height-display); letter-spacing: -0.03125em; }
h1, .h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); }
h2, .h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2); }
h3, .h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); }
h4, .h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); letter-spacing: var(--letter-spacing-h4); }
.lead { font-size: var(--font-size-lead); font-weight: var(--font-weight-lead); line-height: var(--line-height-lead); letter-spacing: var(--letter-spacing-lead); }
.small, small { font-size: var(--font-size-small); line-height: var(--line-height-small); }
.caption { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-muted); }
.label { font-size: var(--font-size-label); font-weight: var(--font-weight-label); line-height: var(--line-height-label); }
code, kbd, samp, .code { font-family: var(--font-code); font-size: var(--font-size-code); line-height: var(--line-height-code); }
.muted { color: var(--color-text-muted); }
.num { font-variant-numeric: tabular-nums; }
strong, b { font-weight: 600; }

/* ---------- Links ---------- */
a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
a:active { color: var(--color-primary-active); }

/* ---------- Focus (3px ring, 3px offset, page-colored halo) ---------- */
:focus { outline: none; }
:focus-visible { outline: var(--layout-focus-width) solid var(--color-focus); outline-offset: var(--layout-focus-offset); box-shadow: 0 0 0 var(--layout-focus-offset) var(--color-page); }

/* ---------- Helpers ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-16); top: var(--space-8); z-index: calc(var(--layout-z-toast) + 1); padding: var(--space-12) var(--space-16); min-height: var(--layout-touch-target); background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; text-decoration: none; border-radius: var(--radius-control); transform: translateY(-200%); }
.skip-link:focus, .skip-link:focus-visible { transform: none; color: var(--color-on-primary); }
.icon { flex: none; width: 24px; height: 24px; }
.icon-20 { width: 20px; height: 20px; }
.icon-16 { width: 16px; height: 16px; }

/* ---------- Buttons ---------- */
.btn { --btn-h: var(--layout-button-default); --btn-px: var(--space-20); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--btn-h); padding: 0 var(--btn-px); border: var(--border-thin) solid transparent; border-radius: var(--radius-control); font-family: var(--font-body); font-size: var(--font-size-label); font-weight: var(--font-weight-label); line-height: var(--line-height-label); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.btn:hover { text-decoration: none; }
.btn .icon { width: 20px; height: 20px; }
.btn-sm { --btn-h: var(--layout-button-small); --btn-px: var(--space-16); }
.btn-lg { --btn-h: var(--layout-button-large); --btn-px: var(--space-24); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-primary:active { background: var(--color-primary-active); color: var(--color-on-primary); }
.btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-surface-blue); color: var(--color-primary); }
.btn-secondary:active { background: var(--color-info-bg); color: var(--color-primary); }
.btn-quiet { background: transparent; color: var(--color-link); border-color: transparent; }
.btn-quiet:hover { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.btn-quiet:active { color: var(--color-primary-active); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--color-disabled-bg); color: var(--color-disabled-text); border-color: transparent; cursor: not-allowed; transform: none; text-decoration: none; }
.btn[aria-busy="true"] { cursor: progress; transform: none; }
.btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kuk-spin var(--motion-slow) linear infinite; }
@keyframes kuk-spin { to { transform: rotate(360deg); } }
@media (hover: none) { .btn-primary:hover { background: var(--color-primary); } .btn-secondary:hover { background: var(--color-surface); } .btn-quiet:hover { text-decoration: none; } }

/* ---------- Forms (basics) ---------- */
.field { display: grid; gap: var(--space-8); }
label, .field-label { font-size: var(--font-size-label); font-weight: var(--font-weight-label); line-height: var(--line-height-label); }
.input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], select, textarea { width: 100%; min-height: var(--layout-input-height); padding: 0 var(--space-12); background: var(--color-surface); color: var(--color-text); border: var(--border-thin) solid var(--color-control-border); border-radius: var(--radius-control); font-size: var(--font-size-body); }
textarea { min-height: 144px; padding: var(--space-12); resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--color-text); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { outline: var(--border-strong) solid var(--color-error); outline-offset: 0; }
input[aria-invalid="true"]:focus-visible, textarea[aria-invalid="true"]:focus-visible { outline: var(--layout-focus-width) solid var(--color-focus); outline-offset: var(--layout-focus-offset); box-shadow: 0 0 0 var(--border-strong) var(--color-error); }
input[disabled], select[disabled], textarea[disabled] { background: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; }
.field-help { color: var(--color-text-muted); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.field-error { display: flex; gap: var(--space-8); align-items: flex-start; color: var(--color-error); font-size: var(--font-size-small); }
input[type="checkbox"] { width: 20px; height: 20px; margin: 12px; accent-color: var(--color-primary); }

/* ---------- Tables (brand book chapter 16) ---------- */
.table-wrap { width: 100%; overflow-x: auto; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
.table { width: 100%; font-size: var(--font-size-body); text-align: left; }
.table th, .table td { padding: var(--space-12) var(--space-16); border-bottom: var(--border-thin) solid var(--color-border); vertical-align: middle; }
.table thead th { height: var(--layout-table-head); background: var(--color-surface-muted); font-weight: 600; white-space: nowrap; }
.table tbody td, .table tbody th { height: var(--layout-table-row); }
.table tbody th { font-weight: 400; }
.table tbody tr:last-child > * { border-bottom: 0; }
@media (hover: hover) { .table-hover tbody tr:hover > * { background: var(--color-surface-blue); } }

/* ---------- Badges / statuses: always icon + word ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-8); border-radius: var(--radius-badge); font-size: var(--font-size-label); font-weight: 600; line-height: var(--line-height-label); white-space: nowrap; }
.badge .icon { width: 20px; height: 20px; }
.badge-valid { color: var(--color-success); background: var(--color-success-bg); }
.badge-invalid { color: var(--color-error); background: var(--color-error-bg); }
.badge-risky { color: var(--color-warning); background: var(--color-warning-bg); }
.badge-unknown { color: var(--color-unknown); background: var(--color-unknown-bg); }
.badge-info { color: var(--color-info); background: var(--color-info-bg); }
.sig { display: inline-flex; align-items: center; gap: var(--space-8); white-space: nowrap; }
.sig .icon { width: 20px; height: 20px; }
.sig-pass { color: var(--color-success); }
.sig-fail { color: var(--color-error); }
.sig-warn { color: var(--color-warning); }
.sig-none { color: var(--color-text-muted); }