/*
  Base layer on top of tokens.css. Reset, typography, focus, and the basic controls.
  Reads tokens only. No raw colors, radii, durations, or z-index numbers.
  Load order: tokens.css, base.css, components.css, then the surface file.
  Logical properties are used so the same file works in RTL.

  Not included: the select popup. A native select is the base, and the custom
  listbox that replaces its popup is a project component (see 03-components.md).
*/

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-block-start: var(--scroll-offset);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

h1, h2, h3, h4 { margin-block: 0 var(--space-xs); color: var(--ink); line-height: var(--leading-snug); text-wrap: balance; }
h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
p { margin-block: 0 var(--space-sm); }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
code, pre, kbd { font-family: var(--font-mono); font-size: var(--text-sm); }
em { font-style: normal; font-weight: var(--weight-semibold); }
img, svg { max-inline-size: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* One focus treatment for every control. Never remove it. */
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.skip-link {
  position: absolute; inset-inline-start: var(--space-xs); inset-block-start: -100px;
  z-index: var(--z-skip); padding: var(--space-xs) var(--space-sm);
  background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius-sm);
}
.skip-link:focus { inset-block-start: var(--space-xs); }

/* ---------------------------------------------------------------- buttons
   One primary (the page CTA), secondary, quiet, danger. Same height as fields. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-block-size: var(--control-h); padding-inline: var(--control-pad-x);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink);
  font-weight: var(--weight-semibold); line-height: 1; cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.btn svg { inline-size: 18px; block-size: 18px; flex: none; }
.btn-primary { background: var(--accent-ink); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink-hover); }
.btn-secondary { background: var(--surface); border-color: var(--control-border); }
.btn-secondary:hover { background: var(--surface-3); }
.btn-quiet:hover { background: var(--surface-3); }
.btn-danger { background: var(--danger-ink); color: var(--on-danger); }
.btn-compact { min-block-size: var(--control-h-compact); }
.btn-icon { inline-size: var(--control-h); padding-inline: 0; }
.btn[aria-busy="true"] { cursor: progress; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ---------------------------------------------------------------- fields */
.field { display: grid; align-content: start; gap: var(--space-2xs); }
.field > label { color: var(--ink); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.field .hint { color: var(--ink-3); font-size: var(--text-xs); }
.field .error { color: var(--danger-ink); font-size: var(--text-sm); }

.input, .select select, .textarea {
  inline-size: 100%; min-block-size: var(--control-h);
  padding-inline: var(--control-pad-x); padding-block: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--control-border); border-radius: var(--radius-sm);
}
.textarea { padding-block: var(--space-xs); min-block-size: calc(var(--control-h) * 2); }
.input:hover, .select select:hover, .textarea:hover { background: var(--surface-2); }
.input[aria-invalid="true"], .select select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-ink); }
.input::placeholder { color: var(--ink-3); }
.input:disabled, .select select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* Select with an SVG chevron. The chevron sits --control-pad-x from the end edge,
   the same distance the text sits from the start edge. */
.select { position: relative; }
.select select { appearance: none; padding-inline-end: calc(var(--control-pad-x) * 2 + 16px); }
.select .chevron {
  position: absolute; inset-inline-end: var(--control-pad-x); inset-block: 0; margin-block: auto;
  inline-size: 16px; block-size: 16px; pointer-events: none; color: var(--ink-3);
}

/* ---------------------------------------------------------------- callouts
   Status triple, uniform 1px border on all four sides, never a one-sided stripe. */
.alert {
  display: flex; gap: var(--space-xs); padding: var(--space-sm);
  border: 1px solid var(--info-line); border-radius: var(--radius-md);
  background: var(--info-soft); color: var(--info-ink);
}
.alert-success { border-color: var(--success-line); background: var(--success-soft); color: var(--success-ink); }
.alert-warning { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-ink); }
.alert-danger { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger-ink); }
.alert svg { inline-size: 20px; block-size: 20px; flex: none; }

/* ---------------------------------------------------------------- tooltip
   Custom, shown on hover and keyboard focus. Never the only home of essential text. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; inset-inline-start: 50%; inset-block-end: calc(100% + var(--space-xs));
  translate: -50% 0; z-index: var(--z-tooltip); inline-size: max-content; max-inline-size: 16rem;
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm);
  background: var(--ink); color: var(--surface); font-size: var(--text-xs); line-height: var(--leading-snug);
  box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }