/*! Strand UI | MIT License | dillingerstaffing.com */

/* cf: feature-surface */
/* cf: surface-tokens */

.strand-feature-surface {
  background: var(--strand-blue-midnight);
  color: var(--strand-gray-200);
  border: 1px solid var(--strand-instrument-border);
  border-radius: var(--strand-radius-lg);
  padding: var(--strand-space-6);
}

.strand-feature-surface--pad-none {
  padding: 0;
  overflow: hidden;
}

.strand-feature-surface--pad-sm {
  padding: var(--strand-space-4);
}

.strand-feature-surface--pad-md {
  padding: var(--strand-space-6);
}

.strand-feature-surface--pad-lg {
  padding: var(--strand-space-8);
}

.strand-feature-surface--pad-xl {
  padding: var(--strand-space-10);
}

.strand-feature-surface {
  --strand-alert-bg: color-mix(in srgb, var(--strand-gray-400) 12%, transparent);
  --strand-alert-color: var(--strand-on-blue-primary);
  --strand-alert-error-status-color: var(--strand-red-tint);
  --strand-alert-info-status-color: var(--strand-blue-indicator);
  --strand-alert-success-status-color: var(--strand-teal-tint);
  --strand-alert-warning-status-color: var(--strand-amber-tint);
  --strand-big-mono-time-color: var(--strand-on-blue-primary);
  --strand-big-mono-time-sep-color: var(--strand-gray-300);
  --strand-btn-ghost-border-color: var(--strand-instrument-border-strong);
  --strand-btn-ghost-color: var(--strand-on-blue-primary);
  --strand-data-readout-label-color: var(--strand-gray-300);
  --strand-data-readout-value-color: var(--strand-on-blue-primary);
  --strand-heading-sm-color: var(--strand-on-blue-primary);
  --strand-headline-color: var(--strand-on-blue-primary);
  --strand-kv-label-color: var(--strand-gray-300);
  --strand-kv-value-color: var(--strand-on-blue-primary);
  --strand-kv-value-status-color: var(--strand-on-blue-primary);
  --strand-lead-color: var(--strand-gray-200);
  --strand-link-color: var(--strand-blue-indicator);
  --strand-link-mono-color: var(--strand-blue-indicator);
  --strand-link-mono-hover-color: var(--strand-blue-indicator);
  --strand-overline-accent-color: var(--strand-blue-indicator);
  --strand-overline-color: var(--strand-gray-300);
  --strand-progress-track-color: var(--strand-instrument-border);
  --strand-stat-strip-border-color: var(--strand-instrument-border);
  --strand-stat-strip-label-color: var(--strand-gray-300);
  --strand-stat-strip-value-color: var(--strand-on-blue-primary);
  --strand-status-chip-neutral-bg: color-mix(in srgb, var(--strand-gray-300) 14%, transparent);
  --strand-status-chip-neutral-border: 1px solid color-mix(in srgb, var(--strand-gray-300) 22%, transparent);
  --strand-status-chip-neutral-color: var(--strand-gray-200);
  --strand-text-secondary-color: var(--strand-gray-200);
  --strand-text-secondary-xs-color: var(--strand-gray-300);
  --strand-title-color: var(--strand-on-blue-primary);
  --strand-value-negative-color: var(--strand-red-tint);
  --strand-value-positive-color: var(--strand-teal-tint);
}