/* Generated from design/system/tokens.json. Run pnpm --filter @grooovycrm/ui tokens:build. */
/* Shared primitives keep the same sizing with and without Tailwind preflight. */
.ds-button,
.ds-surface,
.ds-panel,
.ds-auth,
.ds-auth__panel {
  box-sizing: border-box;
}
/* Shared visual primitives for Vue components and server-rendered Blade. */
.ds-brand {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--brand-size, var(--font-size-28));
  font-weight: 850;
  letter-spacing: -0.07em;
  line-height: 1;
  white-space: nowrap;
}
.ds-brand > span {
  background: var(--brand-logo-bg);
  color: var(--brand-logo-fg);
  border-radius: var(--radius-xs);
  padding: 0.3em 0.4em;
  font-family: var(--font-mono);
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 0;
}
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: var(--type-body-sm);
  font-weight: 600;
  color: var(--color-fg);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.ds-button--primary {
  background: var(--color-action);
  color: var(--color-action-fg);
}
.ds-button--primary:hover:not(:disabled) {
  background: var(--color-action-hover);
}
.ds-button--secondary {
  background: var(--color-card);
  border-color: var(--color-line-default);
}
.ds-button--secondary:hover:not(:disabled),
.ds-button--ghost:hover:not(:disabled) {
  background: var(--color-sunk);
}
.ds-button--ghost {
  background: transparent;
  color: var(--color-fg-secondary);
}
.ds-button--danger {
  background: var(--color-danger);
  color: var(--color-danger-fg);
}
.ds-button--size-s {
  min-height: var(--control-sm);
  padding: var(--space-1) var(--space-3);
}
.ds-button--size-l {
  min-height: var(--control-lg);
  padding: var(--space-3) var(--space-5);
  font: var(--type-body-md);
  font-weight: 600;
}
.ds-button:disabled,
.ds-button[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
}
.ds-field {
  min-width: 0;
  min-height: var(--field-height);
  padding: var(--field-padding);
  background: var(--color-fill);
  color: var(--color-fg);
  border: var(--field-border);
  border-radius: var(--field-radius);
  font: var(--type-input);
}
.ds-field::placeholder {
  color: var(--color-fg-muted);
}
.ds-surface {
  background: var(--color-card);
  color: var(--color-fg);
  border: var(--surface-border);
  box-shadow: var(--surface-shadow);
  border-radius: var(--surface-radius);
}
.ds-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  height: 100%;
}
.ds-action-card--accent {
  background: var(--color-action);
  color: var(--color-action-fg);
}
.ds-action-card__title {
  font: var(--type-heading-3);
  margin: 0;
  letter-spacing: -0.025em;
}
.ds-action-card__description {
  font: var(--type-body-sm);
  color: var(--color-fg-secondary);
  margin: 0;
}
.ds-action-card--accent .ds-action-card__description {
  color: inherit;
}
.ds-action-card__action {
  align-self: flex-end;
  margin-top: auto;
}
.ds-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.ds-page-header__title {
  margin: 0;
  font: var(--type-heading-1);
  letter-spacing: var(--type-heading-1-tracking);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.ds-page-header__description {
  margin: var(--space-2) 0 0;
  color: var(--color-fg-muted);
  font: var(--type-body-md);
}
.ds-page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ds-button:focus-visible,
.ds-field:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .ds-page-header__title {
    font-size: var(--type-heading-2-size);
  }
  .ds-page-header__actions {
    width: 100%;
  }
}
@media (any-pointer: coarse), (max-width: 700px) {
  .ds-button,
  .ds-field {
    min-height: var(--control-touch);
  }
  .ds-button {
    min-width: var(--control-touch);
  }
}

.ds-workspace-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
.ds-form-page {
  max-width: var(--layout-form-max);
}
.ds-panel {
  padding: var(--surface-padding);
  background: var(--color-card);
  color: var(--color-fg);
  border: var(--surface-border);
  box-shadow: var(--surface-shadow);
  border-radius: var(--surface-radius);
  min-width: 0;
}
.ds-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}
.ds-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--color-fg-secondary);
}
.ds-form-field > .ds-field {
  width: 100%;
}
.ds-field.ds-field--short {
  width: 100%;
  max-width: 22ch;
}
.ds-form-field em {
  color: var(--color-danger);
  font-style: normal;
}
.ds-check-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-body-sm);
  color: var(--color-fg-secondary);
}
.ds-check-field input {
  accent-color: var(--color-action);
  flex-shrink: 0;
}
.ds-form-grid,
.ds-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}
.ds-detail-grid {
  margin: 0;
}
.ds-detail-grid dt {
  font: var(--type-caption);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-1);
}
.ds-detail-grid dd {
  font: var(--type-body-md);
  margin: 0;
  overflow-wrap: anywhere;
}
.ds-section-title {
  font: var(--type-heading-3);
  letter-spacing: var(--type-heading-3-tracking);
  margin: 0;
}
.ds-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ds-notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font: var(--type-body-sm);
  margin: 0;
  overflow-wrap: anywhere;
}
.ds-notice--error {
  background: var(--color-danger-weak);
  color: var(--color-danger);
}
.ds-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ds-table-frame {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  background: var(--color-card);
  border-radius: var(--surface-radius);
}
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body-sm);
}
.ds-table th {
  background: transparent;
  font-weight: 600;
  color: var(--color-fg-secondary);
}
.ds-table th,
.ds-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}
textarea.ds-field {
  resize: vertical;
}
.ds-field:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ds-field[aria-invalid='true'] {
  border-color: var(--color-danger);
}
@media (max-width: 700px) {
  .ds-panel {
    padding: var(--space-4);
  }
  .ds-form-grid,
  .ds-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds-actions {
    justify-content: flex-start;
  }
}

/* Nested sections are separated by space and dividers, never a second raised card. */
.ds-inset {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}
.ds-divider-row {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.ds-divider-row:last-child {
  border-bottom: 0;
}
.ds-panel .ds-surface,
.ds-surface .ds-surface,
.ds-panel .ds-panel {
  box-shadow: none;
}
.ds-field {
  box-sizing: border-box;
  transition: border-color var(--duration-fast);
}
.ds-field:hover:not(:disabled):not(:focus-visible) {
  border-color: var(--color-line-strong);
}
.ds-field[readonly] {
  background: var(--color-sunk);
}
.ds-field--size-sm {
  min-height: var(--control-md);
  font: var(--type-body-md);
}
.ds-field--size-lg {
  min-height: var(--control-lg);
}
.ds-field-error {
  font: var(--type-body-sm);
  color: var(--color-danger);
}
.ds-field-hint {
  font: var(--type-body-sm);
  color: var(--color-fg-muted);
  margin: 0;
}
.ds-check-field {
  min-height: var(--control-touch);
  cursor: pointer;
}
.ds-check-field input {
  width: 16px;
  height: 16px;
}
.ds-button--link {
  background: transparent;
  color: var(--color-accent);
  text-underline-offset: 4px;
}
.ds-button--link:hover {
  text-decoration: underline;
}
.ds-button--tone-danger {
  color: var(--color-danger);
}
.ds-button--tone-danger:hover:not(:disabled) {
  background: var(--color-danger-weak);
}
.ds-button--brand {
  background: var(--color-action);
  color: var(--color-action-fg);
}
.ds-button--brand:hover:not(:disabled) {
  background: var(--color-action-hover);
}
.ds-button--success {
  background: var(--color-success);
  color: var(--color-success-fg);
}
.ds-button--danger:hover:not(:disabled),
.ds-button--success:hover:not(:disabled) {
  filter: brightness(0.95);
}
.ds-button--block {
  width: 100%;
}
.ds-button--icon {
  padding: var(--space-2);
  min-width: var(--control-md);
}
.ds-tabs {
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.ds-tabs .ds-button {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-fg-muted);
  padding-inline: 0;
  padding-block: var(--space-3);
  margin-bottom: -1px;
}
.ds-tabs .ds-button:hover:not(:disabled) {
  background: transparent;
  color: var(--color-fg);
}
.ds-tabs .ds-button[aria-pressed='true'] {
  border-bottom-color: var(--color-action);
  color: var(--color-fg);
}
.ds-nav-link {
  color: var(--color-fg-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.ds-nav-link:hover {
  background: var(--color-sunk);
}
.ds-nav-link[aria-current='page'] {
  background: var(--color-sunk);
  color: var(--color-fg);
  font-weight: 600;
}
.ds-notice--success {
  background: var(--color-success-weak);
  color: var(--color-success);
}
.ds-notice--info {
  background: var(--color-info-weak);
  color: var(--color-info);
}
.ds-table {
  font-variant-numeric: tabular-nums;
}
.ds-table td,
.ds-table th {
  overflow-wrap: anywhere;
}
.ds-table tbody tr:last-child td {
  border-bottom: 0;
}
.ds-table-frame {
  border: var(--surface-border);
  box-shadow: var(--surface-shadow);
}
.ds-panel .ds-table-frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ds-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.ds-fieldset legend {
  margin-bottom: var(--space-3);
  font: var(--type-body-sm);
  color: var(--color-fg-secondary);
}
.ds-auth {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--space-6);
  background: var(--color-page);
}
.ds-auth__panel {
  width: min(100%, var(--layout-auth-max));
}
@media (prefers-reduced-motion: reduce) {
  .ds-button,
  .ds-field {
    transition: none;
  }
}

.ds-surface--sunken {
  background: var(--color-sunk);
  box-shadow: none;
  border: 0;
}
.ds-surface--elevated {
  background: var(--color-elev);
  box-shadow: var(--shadow-3);
}
.ds-surface--outline {
  box-shadow: none;
  border: 1px solid var(--color-line-default);
}
.ds-surface--padding-none {
  padding: 0;
}
.ds-surface--padding-sm {
  padding: var(--space-3);
}
.ds-surface--padding-md {
  padding: var(--space-4);
}
.ds-surface--padding-lg {
  padding: var(--surface-padding);
}
.ds-surface--interactive {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: box-shadow var(--duration-fast);
}
.ds-surface--interactive:hover:not(:disabled) {
  box-shadow: var(--shadow-3);
}
.ds-surface--selected {
  border-color: var(--color-action);
  background: var(--color-accent-weak);
}
.ds-surface--interactive:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}
.ds-surface--interactive:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ds-segments {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-control);
  background: var(--color-sunk);
}
.ds-segments--block {
  width: 100%;
}
.ds-segments--block .ds-button {
  flex: 1;
}
.ds-segments [aria-checked='true'] {
  background: var(--color-card);
  color: var(--color-fg);
  box-shadow: var(--shadow-1);
}
.ds-segments [data-tone='success'] {
  background: var(--color-success-weak);
  color: var(--color-success);
}
.ds-segments [data-tone='danger'] {
  background: var(--color-danger-weak);
  color: var(--color-danger);
}
.ds-segments [data-tone='warning'] {
  background: var(--color-warning-weak);
  color: var(--color-warning);
}
.ds-segments [data-tone='info'] {
  background: var(--color-info-weak);
  color: var(--color-info);
}
.ds-segments [data-tone='brand'] {
  background: var(--color-accent-weak);
  color: var(--color-accent-on-weak);
}

.ds-button[aria-pressed='true']:not(.ds-tabs .ds-button) {
  background: var(--color-sunk);
  color: var(--color-fg);
  border-color: var(--color-line-strong);
}
.ds-choice {
  border: 1px solid var(--color-line-default);
  border-radius: var(--radius-md);
  background: var(--color-card);
}
.ds-choice[data-selected='true'] {
  border-color: var(--color-action);
  background: var(--color-accent-weak);
}
.ds-choice[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
}

.ds-auth__title {
  margin: 0;
  font: var(--type-heading-2);
  letter-spacing: var(--type-heading-2-tracking);
  color: var(--color-fg);
}

/* Keep touch sizing after size modifiers, including compact picker controls. */
@media (any-pointer: coarse), (max-width: 700px) {
  .ds-button {
    min-height: var(--control-touch);
  }
  .ds-button {
    min-width: var(--control-touch);
  }
  .ds-nav-link {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: var(--control-touch);
    touch-action: manipulation;
  }
  .ds-check-field input {
    width: var(--space-5);
    height: var(--space-5);
  }
}

/* Native select sizing must be explicit: iOS does not reliably honor min-height. */
select.ds-field {
  box-sizing: border-box;
  height: var(--field-height);
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23818a94' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
}
@media (any-pointer: coarse), (max-width: 700px) {
  select.ds-field {
    height: var(--control-touch);
  }
}

select.ds-field--size-sm {
  height: var(--control-md);
}
select.ds-field--size-lg {
  height: var(--control-lg);
}
@media (any-pointer: coarse), (max-width: 700px) {
  select.ds-field--size-sm,
  select.ds-field--size-lg {
    height: var(--control-touch);
  }
}

.ds-auth__brand {
  margin-bottom: var(--space-6);
}