/* MarketClean Design System tokens sourced from Stitch project 9354268890061206856 */

:root {
  --mc-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --mc-color-background: #f9f9fd;
  --mc-color-surface: #f9f9fd;
  --mc-color-surface-dim: #d9dade;
  --mc-color-surface-low: #f3f3f7;
  --mc-color-surface-container: #ededf1;
  --mc-color-surface-high: #e8e8ec;
  --mc-color-surface-highest: #e2e2e6;
  --mc-color-surface-lowest: #ffffff;

  --mc-color-text: #1a1c1f;
  --mc-color-text-muted: #414754;

  --mc-color-primary: #005ab6;
  --mc-color-primary-strong: #0072e4;
  --mc-color-on-primary: #ffffff;
  --mc-color-primary-soft: #d7e3ff;

  --mc-color-secondary: #445e8e;
  --mc-color-secondary-soft: #afcaff;
  --mc-color-on-secondary-soft: #395483;

  --mc-color-outline: #717785;
  --mc-color-outline-soft: #c1c6d6;
  --mc-color-error: #ba1a1a;
  --mc-color-error-soft: #ffdad6;

  --mc-radius-sm: 8px;
  --mc-radius-md: 12px;
  --mc-radius-lg: 16px;
  --mc-radius-pill: 9999px;

  --mc-space-1: 4px;
  --mc-space-2: 8px;
  --mc-space-3: 12px;
  --mc-space-4: 16px;
  --mc-space-5: 20px;

  --mc-shadow-soft: 0 4px 14px rgba(0, 27, 63, 0.08);
  --mc-shadow-float: 0 8px 32px rgba(0, 27, 63, 0.08);
  --mc-shadow-hairline: inset 0 0 0 1px rgba(113, 119, 133, 0.18);

  --mc-gradient-primary: linear-gradient(180deg, #005ab6 0%, #0072e4 100%);
  --mc-panel-backdrop: rgba(249, 249, 253, 0.88);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mc-color-background: #1a1c1f;
    --mc-color-surface: #1a1c1f;
    --mc-color-surface-dim: #1a1c1f;
    --mc-color-surface-low: #242526;
    --mc-color-surface-container: #2f3034;
    --mc-color-surface-high: #333438;
    --mc-color-surface-highest: #3a3b3c;
    --mc-color-surface-lowest: #1f2023;

    --mc-color-text: #e4e6eb;
    --mc-color-text-muted: #b0b3ba;

    --mc-color-primary: #2d88ff;
    --mc-color-primary-strong: #2d88ff;
    --mc-color-on-primary: #ffffff;
    --mc-color-primary-soft: #233855;

    --mc-color-secondary: #afcaff;
    --mc-color-secondary-soft: #1e314f;
    --mc-color-on-secondary-soft: #c4daff;

    --mc-color-outline: #717785;
    --mc-color-outline-soft: #414754;
    --mc-color-error: #f3425f;
    --mc-color-error-soft: #4f2028;

    --mc-shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.34);
    --mc-shadow-float: 0 12px 36px rgba(0, 0, 0, 0.38);
    --mc-shadow-hairline: inset 0 0 0 1px rgba(113, 119, 133, 0.24);
    --mc-gradient-primary: linear-gradient(180deg, #005ab6 0%, #2d88ff 100%);
    --mc-panel-backdrop: rgba(26, 28, 31, 0.88);
  }
}

.mc-ds-focusable {
  outline: none;
}

.mc-ds-focusable:focus-visible {
  box-shadow:
    0 0 0 1px rgba(0, 92, 186, 0.3),
    0 0 0 3px rgba(0, 92, 186, 0.18);
}

.mc-ds-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mc-color-text-muted);
}

.mc-ds-chip {
  background: var(--mc-color-secondary-soft);
  color: var(--mc-color-on-secondary-soft);
  border-radius: var(--mc-radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.mc-ds-surface-card {
  background: var(--mc-color-surface-low);
  border-radius: var(--mc-radius-md);
  box-shadow: var(--mc-shadow-hairline);
}

.mc-ds-button-primary {
  border: none;
  border-radius: var(--mc-radius-pill);
  background: var(--mc-gradient-primary);
  color: var(--mc-color-on-primary);
  font-weight: 700;
  cursor: pointer;
}

.mc-ds-button-ghost {
  border: none;
  border-radius: var(--mc-radius-sm);
  background: transparent;
  color: var(--mc-color-primary);
  font-weight: 700;
  cursor: pointer;
}