/* =========================================================
   RCM Staff — Design Tokens
   Colors, type, spacing, radii, shadows.
   Mount once on :root; reference vars from component CSS.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');

:root {
  /* ---------- BRAND PRIMITIVES ---------- */
  --rcm-green:        #8BBD3B; /* primary accent — growth, action */
  --rcm-green-600:    #7AAB2D; /* hover / pressed */
  --rcm-green-700:    #689726;
  --rcm-green-100:    #EEF6DC; /* tinted surface */
  --rcm-green-50:     #F6FAEB;

  --rcm-blue:         #4772AB; /* trust, professional */
  --rcm-blue-600:     #3D6499;
  --rcm-blue-700:     #335487;
  --rcm-blue-100:     #DCE5F1;
  --rcm-blue-50:      #EEF3F9;

  --rcm-navy:         #1F2D4A; /* headings, deep brand */
  --rcm-navy-soft:    #2A3A5C;

  /* ---------- NEUTRAL SCALE (cool slate) ---------- */
  --rcm-white:        #FFFFFE; /* spec'd #FFFFFE so PNGs export with alpha */
  --rcm-paper:        #FAFBFC; /* page background */
  --rcm-mist:         #F3F5F8; /* alt section background */
  --rcm-line:         #E4E8EE; /* hairlines, dividers, card borders */
  --rcm-line-strong:  #CFD5DF;
  --rcm-slate-100:    #C1C8D3;
  --rcm-slate-300:    #8C97A7; /* tertiary text, captions */
  --rcm-slate-500:    #5A6577; /* secondary body text */
  --rcm-slate-700:    #2F3947; /* default body text */
  --rcm-charcoal:     #161D2A; /* maximum-contrast text */

  /* ---------- SEMANTIC ROLES ---------- */
  --fg-default:       var(--rcm-slate-700);
  --fg-muted:         var(--rcm-slate-500);
  --fg-subtle:        var(--rcm-slate-300);
  --fg-strong:        var(--rcm-navy);
  --fg-brand:         var(--rcm-blue);
  --fg-accent:        var(--rcm-green-700);
  --fg-on-brand:      var(--rcm-white);
  --fg-on-accent:     #1A2710; /* dark text on the bright green */

  --bg-page:          var(--rcm-paper);
  --bg-surface:       var(--rcm-white);
  --bg-alt:           var(--rcm-mist);
  --bg-brand:         var(--rcm-blue);
  --bg-brand-soft:    var(--rcm-blue-50);
  --bg-accent:        var(--rcm-green);
  --bg-accent-soft:   var(--rcm-green-50);

  --border-default:   var(--rcm-line);
  --border-strong:    var(--rcm-line-strong);
  --border-brand:     var(--rcm-blue);

  /* Healthcare-domain status (used sparingly — not the brand palette) */
  --status-success:   #2F8F4E;
  --status-warning:   #C98A1A;
  --status-danger:    #B8434B;
  --status-info:      var(--rcm-blue);

  /* ---------- TYPE FAMILIES ----------
     Inter is the primary brand font system-wide — body, UI, labels, and headings.
     Manrope is available as an optional display-only alternative for hero headlines
     when extra confidence/weight is wanted; opt-in by setting font-family: var(--font-display).
  */
  --font-sans:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
  --font-body:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
  --font-display:     'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (px-based, healthcare-readable) ---------- */
  --fs-display:       56px; /* hero headlines */
  --fs-h1:            40px;
  --fs-h2:            30px;
  --fs-h3:            22px;
  --fs-h4:            18px;
  --fs-body-lg:       18px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       13px;
  --fs-overline:      12px;

  --lh-tight:         1.15;
  --lh-snug:          1.30;
  --lh-normal:        1.55;
  --lh-relaxed:       1.65;

  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.12em;

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

  /* ---------- SPACING (4px base) ---------- */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-24:         96px;

  /* ---------- RADII ---------- */
  --radius-xs:        4px;   /* tags, inline pills */
  --radius-sm:        6px;   /* inputs */
  --radius-md:        10px;  /* buttons */
  --radius-lg:        14px;  /* cards */
  --radius-xl:        20px;  /* feature panels */
  --radius-pill:      999px;

  /* ---------- SHADOWS (subtle only) ---------- */
  --shadow-xs:        0 1px 2px rgba(31, 45, 74, 0.05);
  --shadow-sm:        0 1px 3px rgba(31, 45, 74, 0.06), 0 1px 2px rgba(31, 45, 74, 0.04);
  --shadow-md:        0 4px 12px rgba(31, 45, 74, 0.08), 0 2px 4px rgba(31, 45, 74, 0.04);
  --shadow-lg:        0 14px 32px rgba(31, 45, 74, 0.10), 0 4px 10px rgba(31, 45, 74, 0.04);
  --shadow-focus:     0 0 0 3px rgba(71, 114, 171, 0.30);
  --shadow-focus-accent: 0 0 0 3px rgba(139, 189, 59, 0.35);

  /* ---------- MOTION ---------- */
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1.2);
  --dur-fast:         140ms;
  --dur-base:         220ms;
  --dur-slow:         360ms;

  /* ---------- LAYOUT ---------- */
  --container-narrow: 880px;
  --container:        1180px;
  --container-wide:   1320px;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   Use these instead of raw <h1> styling where possible.
   ========================================================= */
.rcm-display,
.rcm-h1, .rcm-h2, .rcm-h3, .rcm-h4 {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
}
.rcm-display { font-size: var(--fs-display); font-weight: var(--fw-extrabold); }
.rcm-h1      { font-size: var(--fs-h1);      font-weight: var(--fw-bold); }
.rcm-h2      { font-size: var(--fs-h2);      font-weight: var(--fw-bold);     line-height: var(--lh-snug); }
.rcm-h3      { font-size: var(--fs-h3);      font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.rcm-h4      { font-size: var(--fs-h4);      font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: 0; }

.rcm-body-lg,
.rcm-body,
.rcm-body-sm {
  font-family: var(--font-body);
  color: var(--fg-default);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.rcm-body-lg { font-size: var(--fs-body-lg); }
.rcm-body    { font-size: var(--fs-body); }
.rcm-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }

.rcm-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

.rcm-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.rcm-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Underline brand link */
.rcm-link {
  color: var(--fg-brand);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
.rcm-link:hover { color: var(--rcm-blue-700); }