/* Mediora design system — single source of truth for color, spacing,
   typography across the redesigned P0 surfaces (Home, Report, public
   Doctor profile, /doctors landing).

   Older Sprint-1 pages keep their own legacy CSS for now; this file is
   additive — opt-in via .ds-* utility classes or the .ds-page wrapper. */

:root {
  --ds-color-bg:          #ffffff;
  --ds-color-surface:     #f8fafb;
  --ds-color-surface-2:   #eef9f5;
  --ds-color-border:      #e5eef0;
  --ds-color-border-2:    #d0d6d8;

  --ds-color-ink:         #1a1a1a;
  --ds-color-ink-2:       #444;
  --ds-color-muted:       #666;
  --ds-color-muted-2:     #888;

  --ds-color-primary:     #00A37C;
  --ds-color-primary-2:   #008f6c;
  --ds-color-accent:      #00D4AA;

  --ds-color-success:     #137a4f;
  --ds-color-success-bg:  #e8fbf3;
  --ds-color-warning:     #a66200;
  --ds-color-warning-bg:  #fff7e6;
  --ds-color-danger:      #a02323;
  --ds-color-danger-bg:   #fdecec;
  --ds-color-info:        #1f5fa0;
  --ds-color-info-bg:     #e6f1ff;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;

  --ds-radius-sm:  6px;
  --ds-radius:     10px;
  --ds-radius-lg:  14px;
  --ds-radius-xl:  18px;
  --ds-radius-pill: 999px;

  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --ds-shadow:    0 4px 18px rgba(0,0,0,0.08);
  --ds-shadow-lg: 0 12px 36px rgba(0,0,0,0.12);

  --ds-font-display: 'Inter', 'Heebo', 'Segoe UI', Roboto, Arial, sans-serif;
  --ds-font-body:    'Inter', 'Heebo', 'Segoe UI', Roboto, Arial, sans-serif;
}

.ds-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--ds-space-5);
  color: var(--ds-color-ink);
  font-family: var(--ds-font-body);
}

.ds-section {
  padding: var(--ds-space-8) 0;
}
.ds-section--tight { padding: var(--ds-space-7) 0; }
.ds-section--hero  { padding: var(--ds-space-8) 0 var(--ds-space-7); }

.ds-h1, .ds-h2, .ds-h3 {
  font-family: var(--ds-font-display);
  color: var(--ds-color-ink);
  line-height: 1.25;
  margin: 0 0 var(--ds-space-3);
}
.ds-h1 { font-size: 36px; font-weight: 800; }
.ds-h2 { font-size: 26px; font-weight: 700; }
.ds-h3 { font-size: 18px; font-weight: 700; }

.ds-lead {
  font-size: 17px;
  color: var(--ds-color-muted);
  margin: 0 0 var(--ds-space-5);
  line-height: 1.6;
}

.ds-grid {
  display: grid;
  gap: var(--ds-space-4);
}
.ds-grid--cards-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ds-grid--cards    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ds-grid--cards-lg { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ds-grid--3-2      { grid-template-columns: 2fr 1fr; }

@media (max-width: 900px) {
  .ds-grid--3-2 { grid-template-columns: 1fr; }
}

.ds-card {
  background: var(--ds-color-bg);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ds-card--hoverable:hover {
  transform: translateY(-2px);
  border-color: var(--ds-color-primary);
  box-shadow: var(--ds-shadow);
}
.ds-card--accent {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-surface-2);
}
.ds-card--subtle {
  background: var(--ds-color-surface);
  border-color: var(--ds-color-border);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: 12px 22px;
  border-radius: var(--ds-radius);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
  font-family: inherit;
}
.ds-btn:active:not(:disabled) { transform: translateY(1px); }
.ds-btn:disabled { opacity: .55; cursor: not-allowed; }

.ds-btn--primary {
  background: var(--ds-color-primary);
  color: #fff;
}
.ds-btn--primary:hover:not(:disabled) { background: var(--ds-color-primary-2); }

.ds-btn--ghost {
  background: transparent;
  color: var(--ds-color-primary);
  border: 1.5px solid var(--ds-color-primary);
}
.ds-btn--ghost:hover:not(:disabled) { background: var(--ds-color-surface-2); }

.ds-btn--text {
  background: transparent;
  color: var(--ds-color-primary);
  padding: 8px 12px;
}
.ds-btn--text:hover { background: var(--ds-color-surface-2); }

.ds-btn--lg { padding: 16px 30px; font-size: 16px; }
.ds-btn--block { display: flex; width: 100%; }

.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--ds-radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ds-pill--success { background: var(--ds-color-success-bg); color: var(--ds-color-success); }
.ds-pill--warning { background: var(--ds-color-warning-bg); color: var(--ds-color-warning); }
.ds-pill--danger  { background: var(--ds-color-danger-bg);  color: var(--ds-color-danger); }
.ds-pill--info    { background: var(--ds-color-info-bg);    color: var(--ds-color-info); }
.ds-pill--muted   { background: #f1f1f1;                    color: var(--ds-color-muted); }
.ds-pill--primary { background: var(--ds-color-surface-2);  color: var(--ds-color-primary); }

.ds-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--ds-space-4);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius);
}
.ds-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ds-color-muted-2);
}
.ds-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-color-ink);
}
.ds-stat__value small {
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-color-muted);
  margin-inline-start: 6px;
}

.ds-empty {
  text-align: center;
  padding: var(--ds-space-7) var(--ds-space-5);
  color: var(--ds-color-muted);
}
.ds-empty__icon {
  font-size: 36px;
  color: var(--ds-color-border-2);
  margin-bottom: var(--ds-space-3);
}
.ds-empty__title { font-weight: 600; color: var(--ds-color-ink-2); margin-bottom: var(--ds-space-2); }

.ds-input, .ds-select, .ds-textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--ds-color-border-2);
  border-radius: var(--ds-radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--ds-color-ink);
  background: #fff;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none;
  border-color: var(--ds-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 163, 124, 0.15);
}
.ds-textarea { resize: vertical; min-height: 100px; }

.ds-field {
  margin-bottom: var(--ds-space-4);
}
.ds-field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-color-ink-2);
  margin-bottom: var(--ds-space-2);
}
.ds-field__hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ds-color-muted-2);
}

.ds-divider {
  height: 1px;
  background: var(--ds-color-border);
  margin: var(--ds-space-5) 0;
  border: none;
}

/* Hero — used by Home + /doctors landing */
.ds-hero {
  text-align: center;
  padding: var(--ds-space-8) var(--ds-space-4);
}
.ds-hero__eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ds-color-primary);
  background: var(--ds-color-surface-2);
  padding: 4px 12px;
  border-radius: var(--ds-radius-pill);
  margin-bottom: var(--ds-space-4);
}
.ds-hero__title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 var(--ds-space-4);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.ds-hero__sub {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--ds-color-muted);
  max-width: 700px;
  margin: 0 auto var(--ds-space-5);
  line-height: 1.6;
}
.ds-hero__cta { display: flex; justify-content: center; gap: var(--ds-space-3); flex-wrap: wrap; }

/* Trust band */
.ds-trust-band {
  display: flex;
  justify-content: center;
  gap: var(--ds-space-7);
  padding: var(--ds-space-5);
  background: var(--ds-color-surface);
  border-radius: var(--ds-radius-lg);
  flex-wrap: wrap;
  margin: var(--ds-space-5) 0;
}
.ds-trust-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-color-muted);
  font-size: 13px;
}
.ds-trust-item i { color: var(--ds-color-primary); font-size: 16px; }

/* Rating display */
.ds-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ds-color-warning);
  font-weight: 600;
}
.ds-rating__count { color: var(--ds-color-muted); font-weight: 400; margin-inline-start: 4px; }

/* RTL adjustments */
[dir="rtl"] .ds-stat__value small { margin-inline-start: 6px; }