/*
  Shared design-system layer.
  This file defines reusable component recipes that should consume tokens first.
  It is intentionally lightweight in this first pass so it can be adopted safely.
*/

:root {
  --ks-control-focus-ring: 0 0 0 2px rgba(0, 161, 206, 0.14);
}

body {
  font-family: var(--ks-font-family-base);
  color: var(--ks-theme-text-primary);
  background: var(--ks-theme-page-bg);
}

.ds-page-shell {
  width: min(100%, calc(var(--ks-container-max) + (var(--ks-grid-gutter-desktop) * 2)));
  margin-inline: auto;
  padding-inline: var(--ks-page-margin-desktop);
}

.ds-card {
  background: var(--ks-theme-card-fill);
  border: var(--ks-card-border-width) solid var(--ks-theme-card-border);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-theme-card-shadow);
}

.ds-input,
.ds-select {
  min-height: var(--ks-input-height);
  padding: 0 var(--ks-input-padding-x);
  border: 1px solid var(--ks-theme-search-shell-stroke);
  border-radius: var(--ks-radius-md);
  background: var(--ks-theme-search-shell-fill);
  color: var(--ks-theme-search-text);
  font: inherit;
}

.ds-input:focus,
.ds-input:focus-visible,
.ds-select:focus,
.ds-select:focus-visible {
  outline: none;
  border-color: var(--ks-theme-accent-primary);
  box-shadow: var(--ks-control-focus-ring);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ks-button-height);
  padding: 12px 20px;
  border-radius: var(--ks-radius-pill);
  border: 1px solid transparent;
  font-weight: var(--ks-font-weight-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ks-transition-fast),
    border-color var(--ks-transition-fast),
    color var(--ks-transition-fast),
    box-shadow var(--ks-transition-fast),
    transform var(--ks-transition-fast);
}

.ds-btn--primary {
  background: var(--ks-theme-accent-primary);
  border-color: var(--ks-theme-accent-primary);
  color: #ffffff;
}

.ds-btn--primary:hover {
  background: var(--ks-theme-accent-hover);
  border-color: var(--ks-theme-accent-hover);
}

.ds-btn--secondary {
  background: var(--ks-theme-surface);
  border-color: var(--ks-theme-border);
  color: var(--ks-theme-text-primary);
}

.ds-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ks-theme-accent-primary);
}

.ds-btn--danger {
  background: var(--ks-color-danger);
  border-color: var(--ks-color-danger);
  color: #ffffff;
}

.ds-btn--success {
  background: var(--ks-color-success);
  border-color: var(--ks-color-success);
  color: #ffffff;
}

.ds-btn[disabled],
.ds-input[disabled],
.ds-select[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.ds-replay-control {
  box-shadow: var(--ks-shadow-replay-debossed);
}

@media (max-width: 767px) {
  .ds-page-shell {
    padding-inline: var(--ks-page-margin-mobile);
  }
}