/* Yebeyegh Design System — shared foundations for all four portal surfaces. */
:root {
  /* Brand and semantic colors */
  --ds-color-ink: #132821;
  --ds-color-brand: #0f6b5b;
  --ds-color-brand-strong: #0a4c42;
  --ds-color-lime: #dfff56;
  --ds-color-accent: #ef7d50;
  --ds-color-surface: #ffffff;
  --ds-color-surface-soft: #fbfaf5;
  --ds-color-surface-warm: #f3e8d4;
  --ds-color-canvas: #f4f6f2;
  --ds-color-canvas-warm: #f3eee4;
  --ds-color-text: #132821;
  --ds-color-text-muted: #6f7d76;
  --ds-color-text-subtle: #87958d;
  --ds-color-border: #e2e7e1;
  --ds-color-border-strong: #ced8d1;
  --ds-color-success: #2e8055;
  --ds-color-success-soft: #e8f5ea;
  --ds-color-warning: #b86a20;
  --ds-color-warning-soft: #fff2df;
  --ds-color-danger: #a54d42;
  --ds-color-danger-soft: #fff0ed;
  --ds-color-info: #477f9a;
  --ds-color-info-soft: #eaf4ff;
  --ds-color-trust-text: #456048;
  --ds-color-on-brand-muted: #d0e0d7;
  --ds-color-on-brand-subtle: #aac7b9;
  --ds-color-success-indicator: #79bd77;
  --ds-color-muted-green: #58665d;
  --ds-color-muted-green-strong: #52635a;
  --ds-color-number-muted: #839089;
  --ds-color-note-muted: #6a7a72;
  --ds-color-accent-soft: #f0a46e;

  /* Soft, category-specific accents */
  --ds-color-soft-lime: #ecf3b0;
  --ds-color-soft-blue: #cae6ed;
  --ds-color-soft-rose: #f6ced0;
  --ds-color-soft-green: #cbe4be;
  --ds-color-soft-purple: #ddd5ee;
  --ds-color-soft-orange: #f6d1a7;
  --ds-color-soft-mint: #c4e8dd;
  --ds-color-soft-cream: #fff7ea;
  --ds-color-soft-mint-canvas: #eff8ee;
  --ds-color-soft-lilac-canvas: #f1edf8;
  --ds-color-soft-lilac-canvas-alt: #f0eef1;
  --ds-color-soft-green-canvas: #f3f8e8;
  --ds-color-soft-mint-canvas-alt: #eef8f2;
  --ds-color-soft-rose-canvas: #f4eeeb;
  --ds-color-soft-blue-canvas: #edf3f1;
  --ds-color-soft-olive-canvas: #f3f4e5;
  --ds-color-soft-green-canvas-alt: #edf2e9;
  --ds-color-soft-warm-canvas: #f3eee6;
  --ds-color-soft-lime-icon: #e1f2c7;
  --ds-color-soft-lime-icon-alt: #dff1b8;
  --ds-color-soft-orange-icon: #ffdbb6;
  --ds-color-service-plumbing: #8a9d22;
  --ds-color-service-electrical: #367c87;
  --ds-color-service-carpentry: #bc6c61;
  --ds-color-service-finishing: #62865b;
  --ds-color-service-appliance: #75658c;
  --ds-color-service-handiwork: #b57945;

  /* Type */
  --ds-font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-heading: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --ds-text-caption: 0.75rem;
  --ds-text-small: 0.875rem;
  --ds-text-body: 1rem;
  --ds-text-lead: 1.125rem;
  --ds-text-title-sm: 1.375rem;
  --ds-text-title: 2rem;

  /* Spacing scale */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;
  --ds-space-section: clamp(4.75rem, 8.5vw, 6.75rem);
  --ds-container-width: 73.75rem;
  --ds-dashboard-width: 86.25rem;

  /* Shape, depth, interaction */
  --ds-radius-control: 0.625rem;
  --ds-radius-card: 1rem;
  --ds-radius-panel: 1.25rem;
  --ds-radius-pill: 999px;
  --ds-control-height: 3rem;
  --ds-control-height-compact: 2.75rem;
  --ds-button-padding-x: 1.3125rem;
  --ds-button-padding-x-compact: 0.9375rem;
  --ds-button-gap: 0.75rem;
  --ds-button-font-size: 0.875rem;
  --ds-button-font-size-compact: 0.75rem;
  --ds-button-shadow-hover: 0 0.5rem 1.125rem rgba(19, 40, 33, 0.15);
  --ds-shadow-card: 0 1.125rem 2.8125rem rgba(19, 40, 33, 0.08);
  --ds-shadow-popover: 0 0.75rem 1.875rem rgba(19, 40, 33, 0.12);
  --ds-shadow-focus: 0 0 0 3px rgba(15, 107, 91, 0.2);
  --ds-motion-standard: 180ms ease;
  --ds-motion-emphasized: cubic-bezier(0.22, 0.8, 0.28, 1);
}

/* Shared control contract; layouts and variants remain owned by each surface. */
body,
button,
input,
select,
textarea {
  font-family: var(--ds-font-body);
}

h1,
h2,
h3,
h4,
.brand,
.page-title {
  font-family: var(--ds-font-heading);
}

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-fill {
  fill: currentColor;
  stroke: none;
}

.button {
  min-height: var(--ds-control-height);
  padding-inline: var(--ds-button-padding-x);
  padding-block: 0;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-button-font-size);
  font-weight: 700;
  line-height: 1.15;
  transition: transform var(--ds-motion-standard), box-shadow var(--ds-motion-standard), background-color var(--ds-motion-standard), border-color var(--ds-motion-standard), color var(--ds-motion-standard);
}

.button.button-compact {
  min-height: var(--ds-control-height-compact);
  padding-inline: var(--ds-button-padding-x-compact);
  font-size: var(--ds-button-font-size-compact);
}

.button:hover {
  box-shadow: var(--ds-button-shadow-hover);
}

.button-primary {
  color: #fff;
  background: var(--ds-color-brand);
}

.button-primary:hover {
  background: var(--ds-color-brand-strong);
}

.button-dark {
  color: #fff;
  background: var(--ds-color-ink);
}

.button-soft {
  color: var(--ds-color-ink);
  border-color: var(--ds-color-border);
  background: var(--ds-color-surface);
}

.button-soft:hover {
  border-color: var(--ds-color-border-strong);
  background: var(--ds-color-surface-soft);
}

.step-card:nth-child(2),
.how-step:nth-child(2),
.how-brief-card:nth-child(2) {
  background: var(--ds-color-soft-cream);
}

.step-card:nth-child(3),
.how-step:nth-child(3),
.how-brief-card:nth-child(3) {
  background: var(--ds-color-soft-mint-canvas);
}

.how-step:nth-child(4) {
  background: var(--ds-color-soft-lilac-canvas);
}

.step-icon-brief,
.icon-chat {
  background: var(--ds-color-soft-lime-icon);
}

.step-icon-match,
.icon-match {
  background: var(--ds-color-soft-orange-icon);
}

.step-icon-sort,
.icon-home {
  background: var(--ds-color-soft-mint);
}

.service-yellow { background: var(--ds-color-soft-lime); }
.service-blue { background: var(--ds-color-soft-blue); }
.service-pink { background: var(--ds-color-soft-rose); }
.service-green { background: var(--ds-color-soft-green); }
.service-purple { background: var(--ds-color-soft-purple); }
.service-orange { background: var(--ds-color-soft-orange); }

.service-catalog-card:nth-child(1) { --service-accent: var(--ds-color-service-plumbing); background: var(--ds-color-soft-olive-canvas); }
.service-catalog-card:nth-child(2) { --service-accent: var(--ds-color-service-electrical); background: var(--ds-color-soft-blue-canvas); }
.service-catalog-card:nth-child(3) { --service-accent: var(--ds-color-service-carpentry); background: var(--ds-color-soft-rose-canvas); }
.service-catalog-card:nth-child(4) { --service-accent: var(--ds-color-service-finishing); background: var(--ds-color-soft-green-canvas-alt); }
.service-catalog-card:nth-child(5) { --service-accent: var(--ds-color-service-appliance); background: #f0eef1; }
.service-catalog-card:nth-child(6) { --service-accent: var(--ds-color-service-handiwork); background: var(--ds-color-soft-warm-canvas); }

.service-card:nth-child(1) .service-glyph { background: var(--ds-color-soft-lime-icon); }
.service-card:nth-child(2) .service-glyph { background: var(--ds-color-soft-blue); }
.service-card:nth-child(3) .service-glyph { background: var(--ds-color-soft-rose); }
.service-card:nth-child(4) .service-glyph { background: var(--ds-color-soft-green); }
.service-card:nth-child(5) .service-glyph { background: var(--ds-color-soft-purple); }
.service-card:nth-child(6) .service-glyph { background: var(--ds-color-soft-orange); }

.request-section,
.services-page-cta,
.how-cta,
.why-page-context {
  background: var(--ds-color-surface-warm);
}

.button-danger {
  color: var(--ds-color-danger);
  border-color: #eccfc9;
  background: #fff8f5;
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.form-field input,
.form-field select,
.form-field textarea {
  min-height: var(--ds-control-height);
  border-color: var(--ds-color-border-strong);
  border-radius: var(--ds-radius-control);
  background: var(--ds-color-surface);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--ds-color-brand);
  box-shadow: var(--ds-shadow-focus);
}

.form-error,
.field-error,
.notice.error {
  color: var(--ds-color-danger);
}

.search-input,
.filter-select {
  min-height: var(--ds-control-height-compact);
  border-color: var(--ds-color-border-strong);
  border-radius: var(--ds-radius-control);
  background: var(--ds-color-surface);
}

.panel,
.kpi-card,
.card,
.auth-card,
.request-portal,
.step-card,
.how-step,
.how-brief-card,
.why-page-principle,
.service-card,
.service-catalog-card {
  border-radius: var(--ds-radius-card);
}

#legacy-root[data-yebeyegh-site="worker"] button:not(.secondary) {
  box-shadow: none;
}

#legacy-root[data-yebeyegh-site="worker"] button:not(.secondary):hover {
  box-shadow: var(--ds-button-shadow-hover);
  transform: translateY(-1px);
}

#legacy-root[data-yebeyegh-site="worker"] button.secondary {
  border-radius: var(--ds-radius-pill);
}

.button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}