/* MedStack — shared base styles */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Page background — warm gray, clearly distinct from white card surfaces */
  --bg: #EDECEA;
  --surface: #ffffff;
  --border: rgba(0,0,0,0.1);
  --border-med: rgba(0,0,0,0.15);

  /* Text — all pass WCAG AA (4.5:1) on --bg */
  --text: #1a1a18;           /* 16.5:1 */
  --text-muted: #575753;     /* 5.5:1  — was #6b6b67 which failed at 4.4:1 */
  --text-faint: #5E5E59;     /* 5.0:1  — was #a0a09a which failed at 2.4:1 */
  --text-placeholder: #9A9A94; /* placeholder only — WCAG exempt for inactive UI */

  --blue: #185FA5;
  --blue-bg: #E6F1FB;
  --blue-text: #0C447C;      /* 12.9:1 on --blue-bg */
  --green-bg: #EAF3DE;
  --green-text: #3B6D11;     /* 7.5:1 on --green-bg */
  --amber-bg: #FAEEDA;
  --amber-text: #633806;     /* 9.5:1 on --amber-bg */
  --red-text: #A32D2D;       /* 6.6:1 on white */
  --warn-text: #7A4508;      /* 7.2:1 on white — was #854F0B at 6.4:1, both pass */
  --info-text: #185FA5;      /* 7.0:1 on white */
  --radius: 12px;
  --radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a18;
    --surface: #242422;
    --border: rgba(255,255,255,0.1);
    --border-med: rgba(255,255,255,0.15);
    --text: #f0ede8;
    --text-muted: #a0a09a;   /* 7.5:1 on dark bg */
    --text-faint: #7B7B75;   /* 5.0:1 on dark bg — was #6b6b67 at 4.1:1 */
    --text-placeholder: #606059;
    --blue: #378ADD;
    --blue-bg: #042C53;
    --blue-text: #B5D4F4;
    --green-bg: #173404;
    --green-text: #C0DD97;
    --amber-bg: #412402;
    --amber-text: #FAC775;
    --red-text: #F09595;
    --warn-text: #EF9F27;
    --info-text: #85B7EB;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

/* Modal (shared — used on index, could appear on other pages) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: 1.25rem;
}
.modal {
  background: var(--surface); border-radius: var(--radius);
  max-width: 480px; width: 100%; padding: 1.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.modal-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.modal-body { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.modal-body strong { color: var(--text); }
.modal-body a { color: var(--blue); }
.modal-accept {
  width: 100%; padding: 12px; font-size: 14px; font-weight: 600;
  border-radius: var(--radius-sm); background: var(--blue); color: white;
  border: none; cursor: pointer;
}
.modal-accept:hover { opacity: 0.88; }