/* ============================================================
   Research Communication Platform — Design Tokens
   ============================================================
   Foundation CSS for the Research Communication Platform
   (Amsterdam UMC). Targets: Bootstrap 5.3.2 + Bootstrap Icons.

   Two layers:
     1. Brand tokens — :root variables (--rcp-*)
     2. Semantic helpers — element-level rules that compose
        Bootstrap utilities into our voice.

   Typography uses the system font stack — no webfont needed.
   ============================================================ */

:root {
  /* ---- Brand: medical / approachable palette ---- */
  --rcp-primary:        #4A90C2;  /* medical blue — primary actions */
  --rcp-primary-50:     #eaf3fa;
  --rcp-primary-100:    #d3e6f3;
  --rcp-primary-200:    #a8cde7;
  --rcp-primary-600:    #3a7aa8;  /* hover */
  --rcp-primary-700:    #2c648c;

  --rcp-success:        #7CC576;  /* soft green — delivered, granted */
  --rcp-success-50:     #ecf6eb;
  --rcp-success-100:    #d8edd5;

  --rcp-warning:        #F4A261;  /* soft orange — pending, caution */
  --rcp-warning-50:     #fdf1e7;
  --rcp-warning-100:    #fbe2cc;

  --rcp-danger:         #E76F51;  /* soft red — failed, withdrawn */
  --rcp-danger-50:      #fce9e3;
  --rcp-danger-100:     #f8d2c6;

  --rcp-accent:         #A28BCC;  /* soft purple — used sparingly */
  --rcp-accent-50:      #f1edf7;
  --rcp-accent-100:     #e2d9ee;

  /* ---- Sidebar chrome (dark navy app shell) ---- */
  --rcp-sidebar-bg:     #1e2a3b;
  --rcp-sidebar-hover:  #2c3e50;
  --rcp-sidebar-active: #3498db;
  --rcp-sidebar-width:  260px;
  --rcp-header-height:  60px;

  /* ---- Provider brand colors ---- */
  --rcp-whatsapp:       #25D366;
  --rcp-signal:         #3a76f0;
  --rcp-email:          #0d6efd;
  --rcp-sms:            #6c757d;

  /* ---- Neutrals (Bootstrap-aligned) ---- */
  --rcp-bg:             #f8f9fa;  /* app canvas */
  --rcp-surface:        #ffffff;  /* cards */
  --rcp-surface-muted:  #f8f9fa;  /* read-only / pre blocks */
  --rcp-border:         #dee2e6;
  --rcp-border-soft:    #f0f0f0;

  --rcp-fg:             #212529;
  --rcp-fg-muted:       #6c757d;  /* labels, meta, helpers */
  --rcp-fg-subtle:      #adb5bd;

  /* ---- Type ---- */
  --rcp-font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --rcp-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
                   Consolas, 'Liberation Mono', monospace;

  --rcp-text-xxs:       0.65rem;   /* 10.4px — notification badges */
  --rcp-text-xs:        0.7rem;    /* 11.2px — sidebar section labels */
  --rcp-text-sm:        0.75rem;   /* 12px   — meta, helpers */
  --rcp-text-base-sm:   0.85rem;   /* 13.6px — small body */
  --rcp-text-base:      0.9rem;    /* 14.4px — sidebar nav, body sm */
  --rcp-text-md:        1rem;      /* 16px   — section titles */
  --rcp-text-lg:        1.1rem;    /* 17.6px — wordmark */
  --rcp-text-xl:        1.25rem;   /* 20px   — h5 */
  --rcp-text-2xl:       1.5rem;    /* 24px   — h4 */
  --rcp-text-3xl:       1.75rem;   /* 28px   — stat values */
  --rcp-text-4xl:       2rem;      /* 32px   — large stat values */

  --rcp-fw-regular:     400;
  --rcp-fw-medium:      500;
  --rcp-fw-semibold:    600;
  --rcp-fw-bold:        700;

  --rcp-tracking-eyebrow: 0.5px;   /* uppercase nav-section labels */

  /* ---- Radii ---- */
  --rcp-radius-sm:      0.25rem;   /* template chip cells */
  --rcp-radius-md:      0.5rem;    /* buttons, inputs */
  --rcp-radius-lg:      0.75rem;   /* stat-card, study-card (12px) */
  --rcp-radius-xl:      1rem;      /* default card surface */
  --rcp-radius-2xl:     1.25rem;   /* hero panels */
  --rcp-radius-pill:    9999px;
  --rcp-radius-circle:  50%;

  /* ---- Shadows (medical-soft, never harsh) ---- */
  --rcp-shadow-sm:      0 0.125rem 0.25rem rgba(0,0,0,0.075);
  --rcp-shadow:         0 0.25rem 0.5rem rgba(0,0,0,0.08);
  --rcp-shadow-lg:      0 0.5rem 1rem rgba(0,0,0,0.10);
  --rcp-shadow-hover:   0 0.5rem 1.5625rem rgba(0,0,0,0.10); /* card hover */

  /* ---- Spacing (Bootstrap 0.25rem base) ---- */
  --rcp-space-1:        0.25rem;
  --rcp-space-2:        0.5rem;
  --rcp-space-3:        0.75rem;
  --rcp-space-4:        1rem;
  --rcp-space-5:        1.25rem;
  --rcp-space-6:        1.5rem;
  --rcp-space-8:        2rem;

  /* ---- Motion ---- */
  --rcp-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --rcp-duration-fast:  150ms;
  --rcp-duration:       200ms;
  --rcp-duration-slow:  300ms;

  --rcp-lift:           translateY(-2px); /* card hover */
}

/* ============================================================
   Semantic helpers — small layer that composes Bootstrap.
   ============================================================ */

body {
  font-family: var(--rcp-font-sans);
  background-color: var(--rcp-bg);
  color: var(--rcp-fg);
}

/* Page header pattern: title + muted subtitle */
.rcp-page-title {
  font-size: var(--rcp-text-2xl);
  font-weight: var(--rcp-fw-bold);
  margin: 0 0 var(--rcp-space-1);
  letter-spacing: -0.01em;
}
.rcp-page-subtitle {
  color: var(--rcp-fg-muted);
  margin: 0;
}

/* Section title (with leading icon) — used in card headers */
.rcp-section-title {
  font-size: var(--rcp-text-md);
  font-weight: var(--rcp-fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--rcp-space-2);
  margin: 0;
}

/* Sidebar uppercase eyebrow */
.rcp-eyebrow {
  font-size: var(--rcp-text-xs);
  font-weight: var(--rcp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--rcp-tracking-eyebrow);
  color: rgba(255,255,255,0.4);
}

/* Meta / helper text */
.rcp-meta { font-size: var(--rcp-text-sm); color: var(--rcp-fg-muted); }

/* Code / monospace */
code, pre, .font-monospace { font-family: var(--rcp-font-mono); }

/* Soft card surface */
.rcp-card {
  background: var(--rcp-surface);
  border: 0;
  border-radius: var(--rcp-radius-xl);
  box-shadow: var(--rcp-shadow-sm);
  transition: transform var(--rcp-duration) var(--rcp-ease),
              box-shadow var(--rcp-duration) var(--rcp-ease);
}
.rcp-card.is-interactive:hover {
  transform: var(--rcp-lift);
  box-shadow: var(--rcp-shadow-lg);
}

/* Status dot — 8x8, pairs with a label */
.rcp-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.rcp-status-dot.is-pending   { background: var(--rcp-warning); }
.rcp-status-dot.is-sent      { background: var(--rcp-primary); }
.rcp-status-dot.is-delivered { background: var(--rcp-success); }
.rcp-status-dot.is-failed    { background: var(--rcp-danger); }

/* Subtle status badge — bg-{color}-subtle text-{color} pattern */
.rcp-badge-subtle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--rcp-radius-pill);
  font-size: var(--rcp-text-sm);
  font-weight: var(--rcp-fw-semibold);
  line-height: 1.2;
}
.rcp-badge-subtle.is-success { background: var(--rcp-success-50); color: #2f7a35; }
.rcp-badge-subtle.is-warning { background: var(--rcp-warning-50); color: #a76223; }
.rcp-badge-subtle.is-danger  { background: var(--rcp-danger-50);  color: #a8412a; }
.rcp-badge-subtle.is-info    { background: var(--rcp-primary-50); color: var(--rcp-primary-700); }
.rcp-badge-subtle.is-accent  { background: var(--rcp-accent-50);  color: #6d56a0; }

/* Provider chip */
.rcp-provider {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--rcp-radius-md);
  font-size: var(--rcp-text-sm);
  font-weight: var(--rcp-fw-semibold);
  color: #fff;
}
.rcp-provider.whatsapp { background: var(--rcp-whatsapp); }
.rcp-provider.signal   { background: var(--rcp-signal); }
.rcp-provider.email    { background: var(--rcp-email); }
.rcp-provider.sms      { background: var(--rcp-sms); }

/* Compliance strip — pairs with auth screens, footer */
.rcp-compliance-strip {
  font-size: var(--rcp-text-sm);
  color: var(--rcp-fg-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--rcp-space-2);
}

/* Alert with left-rail accent (default Bootstrap alert overridden) */
.rcp-alert {
  border: 0;
  border-left: 4px solid;
  border-radius: var(--rcp-radius-md);
  background: var(--rcp-surface-muted);
  padding: 0.875rem 1rem;
}
.rcp-alert.is-success { border-left-color: var(--rcp-success); background: var(--rcp-success-50); }
.rcp-alert.is-warning { border-left-color: var(--rcp-warning); background: var(--rcp-warning-50); }
.rcp-alert.is-danger  { border-left-color: var(--rcp-danger);  background: var(--rcp-danger-50); }
.rcp-alert.is-info    { border-left-color: var(--rcp-primary); background: var(--rcp-primary-50); }