/* =============================================================================
   BASE — sensible defaults for raw HTML elements, expressed entirely in
   tokens. SEMANTIC-FIRST: a plain <button>, <a>, <input>, <table> should
   already look right before any class is added. Classes are the last resort.
   ========================================================================== */

@layer base {
  html {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--surface-sunken);
    /* color-scheme lives in config/tokens.css so an explicit data-theme
       can pin native controls (this layer would out-cascade it). */
    accent-color: var(--accent);
  }

  body { color: var(--color-text); }

  /* ---- Headings ------------------------------------------------------- */
  h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: var(--weight-bold); }
  /* Display pairing (Dusk): big headings switch to Bricolage Grotesque and
     sit slightly tighter; h3/h4 stay in the UI face. */
  h1, h2 { font-family: var(--font-display); letter-spacing: var(--tracking-display); }
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  small { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* ---- Links ---------------------------------------------------------- */
  a {
    color: var(--accent);
    text-underline-offset: 0.15em;
    transition: color var(--dur-fast) var(--ease);
  }
  a:hover { color: var(--accent-hover); }

  /* ---- Visible, generous focus for keyboard users --------------------- */
  :focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
  }

  /* ---- Forms: usable defaults without a single class ------------------ */
  label { display: inline-block; font-weight: var(--weight-medium); margin-block-end: var(--space-2xs); }

  input, textarea, select {
    inline-size: 100%;
    min-block-size: var(--touch-target);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--surface);
    color: var(--color-text);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  textarea { min-block-size: calc(var(--touch-target) * 2); resize: vertical; }

  /* Single-value dropdowns: replace the UA caret with a spaced chevron. */
  select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: var(--select-caret-pad-end);
    background-image: var(--select-caret-icon);
    background-repeat: no-repeat;
    background-position: right var(--select-caret-inset) center;
    background-size: var(--select-caret-size);
    cursor: pointer;
  }

  /* Radios/checkboxes keep their natural box; the wrapping label provides
     the 44px touch target. */
  input[type="radio"], input[type="checkbox"] {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    min-block-size: 0;
    flex: none;
    padding: 0;
  }

  fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  legend { font-weight: var(--weight-medium); padding: 0; margin-block-end: var(--space-xs); }
  input:focus-visible, textarea:focus-visible, select:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    outline: none;
  }
  input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--danger);
  }
  ::placeholder { color: var(--color-text-muted); }

  /* ---- Default button look (semantic-first) --------------------------- */
  button, [type="button"], [type="submit"], [type="reset"] {
    min-block-size: var(--touch-target);
    padding: var(--space-xs) var(--space-md);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--surface-raised);
    border: var(--border-width) solid var(--color-border-strong);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  button:hover, [type="submit"]:hover { border-color: var(--accent); }
  button:disabled, [disabled] { opacity: 0.55; cursor: not-allowed; }

  /* ---- Tables --------------------------------------------------------- */
  table { inline-size: 100%; border-collapse: collapse; }
  th, td { padding: var(--space-xs) var(--space-sm); text-align: start; border-block-end: var(--border-width) solid var(--color-border); }
  th { font-weight: var(--weight-medium); color: var(--color-text-muted); }

  /* ---- Misc ----------------------------------------------------------- */
  hr { border: none; border-block-start: var(--border-width) solid var(--color-border); margin-block: var(--space-lg); }
  code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }
  :where(blockquote) { padding-inline-start: var(--space-md); border-inline-start: 3px solid var(--color-border-strong); color: var(--color-text-muted); }
}