/* =========================================================================
   Core Design System — Components
   Buttons, inputs, cards, badges, chips, links, tables.
   All component recipes derive their tokens from tokens.css.
   ========================================================================= */

/* --------------------------------------------------------------------- BUTTONS
   The system has THREE hierarchies × THREE sizes × destructive on/off,
   plus an icon-only variant. All buttons are pills (radius: 200px).
   Label is Roboto Bold 16/16 with letter-spacing 0.5px (button tracking).
*/
.ds-btn {
  --btn-pad-y: var(--control-pad-y);
  --btn-pad-x: var(--control-pad-x);
  --btn-font: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--btn-font);
  line-height: 16px;
  letter-spacing: var(--tracking-button);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-duration) var(--motion-easing),
              color var(--motion-duration) var(--motion-easing),
              border-color var(--motion-duration) var(--motion-easing);
  min-height: var(--control-height);
}
.ds-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* sizes */
.ds-btn--sm  { --btn-pad-y: var(--control-pad-y-sm); --btn-pad-x: var(--control-pad-x-sm); --btn-font: 14px; min-height: var(--control-height-sm); }
.ds-btn--lg  { --btn-pad-y: var(--control-pad-y-lg); --btn-pad-x: var(--control-pad-x-lg); --btn-font: 18px; min-height: var(--control-height-lg); }

/* PRIMARY — filled (primary) */
.ds-btn--primary {
  background: var(--primary);
  color: var(--fg-on-primary);
  border-color: var(--primary);
}
.ds-btn--primary:hover   { background: var(--primary-hover);  border-color: var(--primary-hover); }
.ds-btn--primary:active  { background: var(--primary-active); border-color: var(--primary-active); }
.ds-btn--primary:disabled,
.ds-btn--primary[aria-disabled="true"] {
  background: var(--bg-disabled); border-color: var(--bg-disabled); color: var(--fg-disabled); cursor: not-allowed;
}

/* SECONDARY — outlined (primary) */
.ds-btn--secondary {
  background: var(--white);
  color: var(--primary);
  border-color: var(--primary);
}
.ds-btn--secondary:hover  { background: var(--primary-bg);  border-width: 2px; padding-block: calc(var(--btn-pad-y) - 1px); padding-inline: calc(var(--btn-pad-x) - 1px); }
.ds-btn--secondary:active { background: var(--primary-tint); }
.ds-btn--secondary:disabled,
.ds-btn--secondary[aria-disabled="true"] {
  border-color: var(--border-disabled); color: var(--fg-disabled); cursor: not-allowed;
}

/* TERTIARY — text only */
.ds-btn--tertiary {
  background: transparent;
  color: var(--primary);
  border-color: transparent;
}
.ds-btn--tertiary:hover  { background: var(--bg-hover-subtle);  }
.ds-btn--tertiary:active { background: var(--bg-disabled); color: var(--primary-active); }
.ds-btn--tertiary:disabled,
.ds-btn--tertiary[aria-disabled="true"] {
  color: var(--fg-disabled); cursor: not-allowed;
}

/* DESTRUCTIVE modifier (works with primary / secondary / tertiary) */
.ds-btn--destructive.ds-btn--primary    { background: var(--bg-error-strong); border-color: var(--bg-error-strong); color: var(--fg-on-error); }
.ds-btn--destructive.ds-btn--primary:hover  { background: var(--bg-error-strong-hover); border-color: var(--bg-error-strong-hover); }
.ds-btn--destructive.ds-btn--secondary  { color: var(--fg-error); border-color: var(--border-error); }
.ds-btn--destructive.ds-btn--secondary:hover { background: var(--bg-error-subtle); }
.ds-btn--destructive.ds-btn--tertiary   { color: var(--fg-error); }
.ds-btn--destructive.ds-btn--tertiary:hover  { background: var(--bg-error-subtle); }

/* ICON-ONLY — square hit target, sized to control-height */
.ds-btn--icon {
  width: var(--control-height); height: var(--control-height); min-height: 0;
  padding: 0;
  border-radius: var(--radius-pill);
}
.ds-btn--icon.ds-btn--sm { width: var(--control-height-sm); height: var(--control-height-sm); }
.ds-btn--icon.ds-btn--lg { width: var(--control-height-lg); height: var(--control-height-lg); }

/* --------------------------------------------------------------------- LINKS */
.ds-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: var(--fw-semibold);
}
.ds-link:hover { color: var(--fg-link-hover); text-decoration-thickness: 2px; }
.ds-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------- CARDS */
.ds-card {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: var(--space-x-big);
  transition: box-shadow var(--motion-duration) var(--motion-easing),
              border-color var(--motion-duration) var(--motion-easing);
}
.ds-card--hover-lift:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.ds-card--highlight-top    { box-shadow: var(--shadow-sm), inset 0px 4px 0px 0px var(--primary); }
.ds-card--highlight-left   { box-shadow: var(--shadow-sm), inset 4px 0px 0px 0px var(--primary); }
.ds-card--flat             { box-shadow: none; }

/* --------------------------------------------------------------------- INPUTS */
.ds-field { display: flex; flex-direction: column; gap: 4px; }
.ds-field__label {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
}
.ds-field__hint {
  font-size: var(--text-body-s);
  color: var(--fg-muted);
}
.ds-field__error {
  font-size: var(--text-body-s);
  color: var(--fg-error);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-input,
.ds-textarea,
.ds-select {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
  color: var(--fg-strong);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  min-height: var(--control-height);
  width: 100%;
  transition: border-color var(--motion-duration) var(--motion-easing),
              box-shadow var(--motion-duration) var(--motion-easing);
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--fg-placeholder); }
.ds-input:hover,
.ds-textarea:hover,
.ds-select:hover { border-color: var(--border-hover); }
.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
  border-color: var(--primary);
  outline: var(--focus-ring);
  outline-offset: 1px;
}
.ds-input[aria-invalid="true"],
.ds-textarea[aria-invalid="true"],
.ds-select[aria-invalid="true"] { border-color: var(--border-error); }
.ds-input:disabled,
.ds-textarea:disabled,
.ds-select:disabled { background: var(--bg-disabled); color: var(--fg-disabled); cursor: not-allowed; }

/* --------------------------------------------------------------------- BADGES */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 16px;
  background: var(--bg-disabled);
  color: var(--fg-default);
}
.ds-badge--primary { background: var(--primary-tint); color: var(--primary-strong); }
.ds-badge--info    { background: var(--bg-info);     color: var(--fg-info); }
.ds-badge--success { background: var(--bg-success);  color: var(--fg-success); }
.ds-badge--warning { background: var(--bg-warning);  color: var(--fg-warning); }
.ds-badge--error   { background: var(--bg-error);    color: var(--fg-error); }

/* --------------------------------------------------------------------- CHIPS */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--border-strong);
  color: var(--fg-strong);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  min-height: var(--control-height-sm);
}
.ds-chip:hover            { border-color: var(--primary); }
.ds-chip:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.ds-chip[aria-pressed="true"],
.ds-chip--selected        { background: var(--primary); color: var(--fg-on-primary); border-color: var(--primary); }

/* --------------------------------------------------------------------- DIVIDERS */
.ds-divider {
  height: 1px;
  background: var(--border-default);
  border: 0;
}

/* --------------------------------------------------------------------- BREADCRUMBS */
.ds-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: var(--text-body-s);
  color: var(--fg-muted);
}
.ds-breadcrumb a       { color: var(--fg-link); }
.ds-breadcrumb__sep    { color: var(--fg-subtle); }
.ds-breadcrumb__current{ color: var(--fg-strong); font-weight: var(--fw-semibold); }

@media (forced-colors: active) {
  .ds-btn,
  .ds-input,
  .ds-textarea,
  .ds-select,
  .ds-chip,
  .ds-card {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }
  .ds-btn:focus-visible,
  .ds-input:focus,
  .ds-textarea:focus,
  .ds-select:focus,
  .ds-chip:focus-visible,
  .ds a:focus-visible,
  .ds-link:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}