@layer components {

/* ── Aegis buttons (ported from inputs-button--guidelines) ──
 * Five variants: primary, secondary (outlined), tertiary (light grey),
 * text, info (contained slate), destructive (with -outlined and -text
 * sub-variants). Classes are intent-complete (no composition needed). */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 16px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  letter-spacing: 0.02em;
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ds-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 91, 255, 0.3); /* brand-500 at focusVisible opacity */
}
.ds-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* Primary — solid brand. One per area. */
.ds-btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}
.ds-btn--primary:hover  { background: var(--color-accent-hover);  border-color: var(--color-accent-hover);  color: var(--color-accent-text); }
.ds-btn--primary:active { background: var(--color-accent-active); border-color: var(--color-accent-active); }

/* Secondary — outlined brand. Standard "Save" companion to a primary. */
.ds-btn--secondary {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.ds-btn--secondary:hover  { background: rgba(63, 91, 255, 0.06); color: var(--color-accent); border-color: var(--color-accent); }
.ds-btn--secondary:active { background: rgba(63, 91, 255, 0.12); }

/* Tertiary — light grey contained. Typically "Cancel" opposite a Save. */
.ds-btn--tertiary {
  background: var(--c-neutral-200);
  color: var(--color-text-primary);
  border-color: var(--c-neutral-200);
}
.ds-btn--tertiary:hover  { background: var(--c-neutral-300); border-color: var(--c-neutral-300); color: var(--color-text-primary); }
.ds-btn--tertiary:active { background: var(--c-neutral-400); border-color: var(--c-neutral-400); }

/* Text — transparent, brand text. "Back to Main", inline actions. */
.ds-btn--text {
  background: transparent;
  color: var(--color-accent);
  border-color: transparent;
  padding: 6px 8px;
}
.ds-btn--text:hover  { background: rgba(63, 91, 255, 0.06); color: var(--color-accent); border-color: transparent; }
.ds-btn--text:active { background: rgba(63, 91, 255, 0.12); }

/* Info — slate-blue contained. "View Info" pattern. */
.ds-btn--info {
  background: var(--c-info-500);
  color: var(--color-accent-text);
  border-color: var(--c-info-500);
}
.ds-btn--info:hover  { background: var(--c-info-700); border-color: var(--c-info-700); color: var(--color-accent-text); }

/* Info text — "More Info" pattern. */
.ds-btn--info-text {
  background: transparent;
  color: var(--c-info-500);
  border-color: transparent;
  padding: 6px 8px;
}
.ds-btn--info-text:hover { background: rgba(96, 125, 139, 0.08); color: var(--c-info-500); border-color: transparent; }

/* Destructive — contained, outlined, text. */
.ds-btn--danger {
  background: var(--c-danger-500);
  color: var(--color-accent-text);
  border-color: var(--c-danger-500);
}
.ds-btn--danger:hover { background: var(--c-danger-700); border-color: var(--c-danger-700); color: var(--color-accent-text); }

.ds-btn--danger-outlined {
  background: transparent;
  color: var(--c-danger-500);
  border-color: var(--c-danger-500);
}
.ds-btn--danger-outlined:hover { background: rgba(255, 84, 84, 0.06); color: var(--c-danger-500); border-color: var(--c-danger-500); }

.ds-btn--danger-text {
  background: transparent;
  color: var(--c-danger-500);
  border-color: transparent;
  padding: 6px 8px;
}
.ds-btn--danger-text:hover { background: rgba(255, 84, 84, 0.06); color: var(--c-danger-500); border-color: transparent; }

/* Size variants */
.ds-btn--sm { padding: 6px 12px; font-size: var(--font-size-xs); }
.ds-btn--lg { padding: 12px 20px; font-size: var(--font-size-base); }
.ds-btn--block { width: 100%; }

/* ── MODEC toolbar action button (Reset / Refresh / Export / Columns…) ──
 * MUI TextButton pattern: NO chrome at rest (no border, no background) —
 * just icon + label in dark text. Soft brand-blue pill appears on hover
 * only (Images #155, #156). Used across the app: plansRefreshBtn,
 * gitMetricsRefresh, reportRefresh, qcCapRefreshBtn, qcFcstRefreshBtn,
 * and the Manage SpeedDial trigger.
 *
 * `border: 0 !important` and `box-shadow: none` defend against the base
 * `.ds-btn { border: 1px solid transparent }` rule which can still
 * render as a thin grey line in some browsers' rasterization of the
 * "transparent" color (Image #184 — Manage button showed a 1px grey
 * outline in the default state because of that base border).
 *
 * Vertical-padding bump (`9px`) lifts the toolbar button height to match
 * `.ds-multiselect__trigger` (~39px) so dropdown + Refresh + Manage all
 * sit on a single horizontal baseline. */
.ds-btn--toolbar {
  background: transparent;
  color: var(--color-text-primary);
  border: 0 !important;                          /* defeat the base ds-btn 1px transparent border */
  padding: 9px 12px;                             /* match multiselect height */
  border-radius: 8px;                            /* soft pill shape on hover */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  box-shadow: none;
}
.ds-btn--toolbar:hover {
  background: rgba(63, 91, 255, 0.08);           /* MUI text-button hover: primary @ 8% */
  color: var(--color-text-primary);
  border-color: transparent;
}
.ds-btn--toolbar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(63, 91, 255, 0.3);
}
.ds-btn--toolbar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}
.ds-btn--toolbar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
}

} /* end @layer components */