/* ============================================================
   components.css — class-free component layer
   Native elements + semantic tokens only (no authored classes).
   ============================================================ */

/* Buttons — <button>, <a[role=button]>, <input[type=submit]> */
button, input[type='submit'], input[type='button'], input[type='reset'], a[role='button'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10, 0.8rem);
  border-radius: var(--btn-border-radius);
  border: var(--btn-border-width, 2px) solid transparent;
  background: var(--btn-primary-background);
  color: var(--btn-primary-color);
  font-family: inherit;
  font-size: var(--btn-medium-font-size, 1.5rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding-block: var(--btn-medium-padding-block, var(--space-10, 0.8rem));
  padding-inline: var(--btn-medium-padding-inline, var(--space-32, 3.2rem));
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
button:hover, a[role='button']:hover {
  background: var(--btn-primary-background--hover);
  color: var(--btn-primary-color--hover);
}
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Sizes (attribute-free; rely on tokens) */
button[data-size='small']  { font-size: var(--btn-small-font-size);  padding-block: var(--btn-small-padding-block);  padding-inline: var(--btn-small-padding-inline); }
button[data-size='medium'] { font-size: var(--btn-medium-font-size); padding-block: var(--btn-medium-padding-block); padding-inline: var(--btn-medium-padding-inline); }
button[data-size='large']  { font-size: var(--btn-large-font-size);  padding-block: var(--btn-large-padding-block);  padding-inline: var(--btn-large-padding-inline); }
button[data-size='x-large']{ font-size: var(--btn-x-large-font-size);padding-block: var(--btn-x-large-padding-block); padding-inline: var(--btn-x-large-padding-inline); }

/* Variants — attribute semantics (data-variant), no classes */
button[data-variant='primary'], a[role='button'][data-variant='primary'] {
  background: var(--btn-primary-background);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-border-color);
}
button[data-variant='primary']:hover, a[role='button'][data-variant='primary']:hover {
  background: var(--btn-primary-background--hover);
  color: var(--btn-primary-color--hover);
  border-color: var(--btn-primary-border-color--hover);
}

button[data-variant='secondary'], a[role='button'][data-variant='secondary'] {
  background: var(--btn-secondary-background);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border-color);
}
button[data-variant='secondary']:hover, a[role='button'][data-variant='secondary']:hover {
  background: var(--btn-secondary-background--hover);
  color: var(--btn-secondary-color--hover);
  border-color: var(--btn-secondary-border-color--hover);
}

button[data-variant='light'], a[role='button'][data-variant='light'] {
  background: var(--btn-light-background);
  color: var(--btn-light-color);
  border-color: var(--btn-light-border-color);
}
button[data-variant='light']:hover, a[role='button'][data-variant='light']:hover {
  background: var(--btn-light-background--hover);
  color: var(--btn-light-color--hover);
  border-color: var(--btn-light-border-color--hover);
}

button[data-variant='dark'], a[role='button'][data-variant='dark'] {
  background: var(--btn-dark-background);
  color: var(--btn-dark-color);
  border-color: var(--btn-dark-border-color);
}
button[data-variant='dark']:hover, a[role='button'][data-variant='dark']:hover {
  background: var(--btn-dark-background--hover);
  color: var(--btn-dark-color--hover);
  border-color: var(--btn-dark-border-color--hover);
}

button[data-variant='info'], a[role='button'][data-variant='info'] {
  background: var(--btn-info-background);
  color: var(--btn-info-color);
  border-color: var(--btn-info-border-color);
}
button[data-variant='info']:hover, a[role='button'][data-variant='info']:hover {
  background: var(--btn-info-background--hover);
  color: var(--btn-info-color--hover);
  border-color: var(--btn-info-border-color--hover);
}

button[data-variant='success'], a[role='button'][data-variant='success'] {
  background: var(--btn-success-background);
  color: var(--btn-success-color);
  border-color: var(--btn-success-border-color);
}
button[data-variant='success']:hover, a[role='button'][data-variant='success']:hover {
  background: var(--btn-success-background--hover);
  color: var(--btn-success-color--hover);
  border-color: var(--btn-success-border-color--hover);
}

button[data-variant='warning'], a[role='button'][data-variant='warning'] {
  background: var(--btn-warning-background);
  color: var(--btn-warning-color);
  border-color: var(--btn-warning-border-color);
}
button[data-variant='warning']:hover, a[role='button'][data-variant='warning']:hover {
  background: var(--btn-warning-background--hover);
  color: var(--btn-warning-color--hover);
  border-color: var(--btn-warning-border-color--hover);
}

button[data-variant='danger'], a[role='button'][data-variant='danger'] {
  background: var(--btn-danger-background);
  color: var(--btn-danger-color);
  border-color: var(--btn-danger-border-color);
}
button[data-variant='danger']:hover, a[role='button'][data-variant='danger']:hover {
  background: var(--btn-danger-background--hover);
  color: var(--btn-danger-color--hover);
  border-color: var(--btn-danger-border-color--hover);
}

button[data-variant='muted'], a[role='button'][data-variant='muted'] {
  background: var(--btn-muted-background);
  color: var(--btn-muted-color);
  border-color: var(--btn-muted-border-color);
}
button[data-variant='muted']:hover, a[role='button'][data-variant='muted']:hover {
  background: var(--btn-muted-background--hover);
  color: var(--btn-muted-color--hover);
  border-color: var(--btn-muted-border-color--hover);
}

/* Outline variants */
button[data-variant='primary'][data-style='outline'], a[role='button'][data-variant='primary'][data-style='outline'] {
  background: var(--btn-primary-outline-background);
  color: var(--btn-primary-outline-color);
  border-color: var(--btn-primary-outline-border-color);
}
button[data-variant='primary'][data-style='outline']:hover, a[role='button'][data-variant='primary'][data-style='outline']:hover {
  background: var(--btn-primary-outline-background--hover);
  color: var(--btn-primary-outline-color--hover);
  border-color: var(--btn-primary-outline-border-color--hover);
}

button[data-variant='secondary'][data-style='outline'], a[role='button'][data-variant='secondary'][data-style='outline'] {
  background: var(--btn-secondary-outline-background);
  color: var(--btn-secondary-outline-color);
  border-color: var(--btn-secondary-outline-border-color);
}
button[data-variant='secondary'][data-style='outline']:hover, a[role='button'][data-variant='secondary'][data-style='outline']:hover {
  background: var(--btn-secondary-outline-background--hover);
  color: var(--btn-secondary-outline-color--hover);
  border-color: var(--btn-secondary-outline-border-color--hover);
}

button[data-variant='light'][data-style='outline'], a[role='button'][data-variant='light'][data-style='outline'] {
  background: var(--btn-light-outline-background);
  color: var(--btn-light-outline-color);
  border-color: var(--btn-light-outline-border-color);
}
button[data-variant='light'][data-style='outline']:hover, a[role='button'][data-variant='light'][data-style='outline']:hover {
  background: var(--btn-light-outline-background--hover);
  color: var(--btn-light-outline-color--hover);
  border-color: var(--btn-light-outline-border-color--hover);
}

button[data-variant='dark'][data-style='outline'], a[role='button'][data-variant='dark'][data-style='outline'] {
  background: var(--btn-dark-outline-background);
  color: var(--btn-dark-outline-color);
  border-color: var(--btn-dark-outline-border-color);
}
button[data-variant='dark'][data-style='outline']:hover, a[role='button'][data-variant='dark'][data-style='outline']:hover {
  background: var(--btn-dark-outline-background--hover);
  color: var(--btn-dark-outline-color--hover);
  border-color: var(--btn-dark-outline-border-color--hover);
}

button[data-variant='info'][data-style='outline'], a[role='button'][data-variant='info'][data-style='outline'] {
  background: var(--btn-info-outline-background);
  color: var(--btn-info-outline-color);
  border-color: var(--btn-info-outline-border-color);
}
button[data-variant='info'][data-style='outline']:hover, a[role='button'][data-variant='info'][data-style='outline']:hover {
  background: var(--btn-info-outline-background--hover);
  color: var(--btn-info-outline-color--hover);
  border-color: var(--btn-info-outline-border-color--hover);
}

button[data-variant='success'][data-style='outline'], a[role='button'][data-variant='success'][data-style='outline'] {
  background: var(--btn-success-outline-background);
  color: var(--btn-success-outline-color);
  border-color: var(--btn-success-outline-border-color);
}
button[data-variant='success'][data-style='outline']:hover, a[role='button'][data-variant='success'][data-style='outline']:hover {
  background: var(--btn-success-outline-background--hover);
  color: var(--btn-success-outline-color--hover);
  border-color: var(--btn-success-outline-border-color--hover);
}

button[data-variant='warning'][data-style='outline'], a[role='button'][data-variant='warning'][data-style='outline'] {
  background: var(--btn-warning-outline-background);
  color: var(--btn-warning-outline-color);
  border-color: var(--btn-warning-outline-border-color);
}
button[data-variant='warning'][data-style='outline']:hover, a[role='button'][data-variant='warning'][data-style='outline']:hover {
  background: var(--btn-warning-outline-background--hover);
  color: var(--btn-warning-outline-color--hover);
  border-color: var(--btn-warning-outline-border-color--hover);
}

button[data-variant='danger'][data-style='outline'], a[role='button'][data-variant='danger'][data-style='outline'] {
  background: var(--btn-danger-outline-background);
  color: var(--btn-danger-outline-color);
  border-color: var(--btn-danger-outline-border-color);
}
button[data-variant='danger'][data-style='outline']:hover, a[role='button'][data-variant='danger'][data-style='outline']:hover {
  background: var(--btn-danger-outline-background--hover);
  color: var(--btn-danger-outline-color--hover);
  border-color: var(--btn-danger-outline-border-color--hover);
}

button[data-variant='muted'][data-style='outline'], a[role='button'][data-variant='muted'][data-style='outline'] {
  background: var(--btn-muted-outline-background);
  color: var(--btn-muted-outline-color);
  border-color: var(--btn-muted-outline-border-color);
}
button[data-variant='muted'][data-style='outline']:hover, a[role='button'][data-variant='muted'][data-style='outline']:hover {
  background: var(--btn-muted-outline-background--hover);
  color: var(--btn-muted-outline-color--hover);
  border-color: var(--btn-muted-outline-border-color--hover);
}

/* Forms — native elements */
label { color: var(--form-label-color); font-size: var(--form-label-font-size); }
input:not([type='submit']):not([type='button']):not([type='reset']), select, textarea {
  width: 100%;
  color: var(--form-input-color);
  background: var(--form-input-background-color);
  font: inherit;
  font-size: var(--form-input-font-size);
  line-height: var(--form-input-line-height);
  border: var(--form-input-border-width) solid var(--form-input-border-color);
  border-radius: var(--form-input-border-radius);
  padding-block: var(--form-input-padding-block);
  padding-inline: var(--form-input-padding-inline);
}
input:focus, select:focus, textarea:focus {
  color: var(--form-input-color--focus);
  background: var(--form-input-background-color--focus);
  border-color: var(--form-focus-outline-color, var(--primary));
  outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--primary));
  outline-offset: 1px;
}
input::placeholder, textarea::placeholder { color: var(--form-placeholder-color); }
fieldset { margin: 0; padding: 0; border: 0; }

/* Lists, figure, blockquote, captions — the missing base tokens */
ol, ul { margin: 0; padding-left: var(--list-indent-spacing, 2.4rem); }
li + li { margin-top: var(--list-spacing, 0.8rem); }
figure { margin: 0; }
figcaption { font-size: var(--text-14, 1.4rem); color: var(--caption); }
blockquote { margin: 0; padding-inline: var(--space-16, 1.6rem); border-inline-start: 0.4rem solid var(--primary); color: var(--muted); }
hr { border: 0; border-block-start: 1px solid var(--black-t-5, rgba(0,0,0,.25)); }
code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; }
mark { background: var(--primary-t-3, rgba(9,162,249,.3)); color: inherit; }