/* ============================================================
   Recare — Colors & Type
   The single source of truth for foundations.
   ============================================================ */

/* ---------- Fonts (Google Fonts substitution — see README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap');

:root {
  /* ============ COLOR — RAW PALETTE ============ */
  /* Sampled from the supplied logo. Navy + Teal are non-negotiable brand. */
  --rc-navy-900: #06263F;     /* primary dark — backgrounds, hero, headings on light */
  --rc-navy-800: #0B3556;     /* hover / one step lighter than 900 */
  --rc-navy-700: #114968;     /* mid-depth surface, info cards */
  --rc-deep-teal: #035464;    /* gradient transition stop, secondary dark */

  --rc-teal-600: #1A8E83;     /* teal pressed */
  --rc-teal-500: #2DB5A8;     /* PRIMARY BRAND ACCENT — buttons, links, marks */
  --rc-teal-400: #4ECABE;     /* hover, highlights */
  --rc-teal-300: #7FCEC3;     /* soft tint — chips, illustration mid */
  --rc-teal-200: #C4E9E3;     /* mist — feature backgrounds, hover surface */
  --rc-teal-100: #E6F6F3;     /* whisper — page-section tints */
  --rc-teal-50:  #F2FBF9;     /* near-white teal wash */

  /* Neutrals — cool-leaning to live alongside navy */
  --rc-ink-900: #0A1922;      /* darkest text */
  --rc-ink-700: #2A3942;      /* body text */
  --rc-ink-500: #5A6B75;      /* secondary text */
  --rc-ink-400: #8593A0;      /* tertiary text, captions */
  --rc-ink-300: #B6C1CB;      /* disabled, dividers strong */
  --rc-ink-200: #DAE2E9;      /* hairline borders */
  --rc-ink-100: #EEF2F5;      /* subtle dividers, input bg */
  --rc-ink-50:  #F6F8FA;      /* page off-white */
  --rc-white:   #FFFFFF;

  /* Semantic accents (medical context — calm, not loud) */
  --rc-success: #2F9E6E;
  --rc-success-bg: #E4F4EC;
  --rc-warning: #C98A1D;
  --rc-warning-bg: #FCF1DC;
  --rc-danger:  #C84B3B;
  --rc-danger-bg: #FBE8E5;
  --rc-info:    #2E7DB6;
  --rc-info-bg: #E2EFF8;

  /* ============ SEMANTIC TOKENS — use these in components ============ */
  --bg-page:        var(--rc-ink-50);
  --bg-surface:     var(--rc-white);
  --bg-surface-2:   var(--rc-ink-100);
  --bg-hero:        var(--rc-navy-900);
  --bg-hero-grad:   linear-gradient(135deg, var(--rc-navy-900) 0%, var(--rc-deep-teal) 60%, var(--rc-teal-500) 120%);
  --bg-section-soft: var(--rc-teal-50);

  --fg-strong:  var(--rc-ink-900);
  --fg-default: var(--rc-ink-700);
  --fg-muted:   var(--rc-ink-500);
  --fg-subtle:  var(--rc-ink-400);
  --fg-on-dark: var(--rc-white);
  --fg-on-dark-muted: rgba(255,255,255,0.72);

  --border-hairline: var(--rc-ink-200);
  --border-strong:   var(--rc-ink-300);
  --border-focus:    var(--rc-teal-500);

  --accent:           var(--rc-teal-500);
  --accent-hover:     var(--rc-teal-400);
  --accent-pressed:   var(--rc-teal-600);
  --accent-on:        var(--rc-white);

  /* ============ TYPE — RAW STACKS ============ */
  --font-sans-latin: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans-ar:    'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif:      'Fraunces', Georgia, 'Times New Roman', serif;  /* used sparingly for editorial moments */
  --font-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --font-default: var(--font-sans-latin);

  /* Type scale — fluid, healthcare-readable.
     Step size ~1.2 (minor third) for tighter UI hierarchy. */
  --fs-display-1: clamp(48px, 6.4vw, 88px);    /* hero */
  --fs-display-2: clamp(36px, 4.4vw, 60px);    /* section opener */
  --fs-h1: clamp(32px, 3.2vw, 44px);
  --fs-h2: clamp(26px, 2.4vw, 34px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;
  --tracking-base:  0;
  --tracking-wide:  0.02em;
  --tracking-eyebrow: 0.14em;

  /* ============ SPACING / RADII / ELEVATION ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Elevation — soft, cool-tinted (no warm grey). Healthcare brands feel "clean" with low-spread shadows. */
  --shadow-1: 0 1px 2px rgba(10, 25, 34, 0.04), 0 1px 1px rgba(10, 25, 34, 0.03);
  --shadow-2: 0 4px 12px rgba(10, 25, 34, 0.06), 0 1px 2px rgba(10, 25, 34, 0.04);
  --shadow-3: 0 12px 28px rgba(10, 25, 34, 0.08), 0 4px 8px rgba(10, 25, 34, 0.04);
  --shadow-4: 0 24px 60px rgba(6, 38, 63, 0.14), 0 8px 16px rgba(10, 25, 34, 0.06);
  --shadow-teal: 0 12px 28px rgba(45, 181, 168, 0.32);   /* glow on CTAs */

  --ring-focus: 0 0 0 3px rgba(45, 181, 168, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============ SEMANTIC ELEMENT DEFAULTS ============ */
html { color-scheme: light; }
body {
  font-family: var(--font-default);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Arabic locales pick the Arabic family automatically */
:lang(ar), [dir="rtl"] { font-family: var(--font-sans-ar); }

h1, .rc-h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  margin: 0;
}
h2, .rc-h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  margin: 0;
}
h3, .rc-h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0;
}
h4, .rc-h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
  margin: 0;
}
p { margin: 0; }
.rc-display-1 {
  font-size: var(--fs-display-1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--fg-strong);
}
.rc-display-2 {
  font-size: var(--fs-display-2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}
.rc-eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.rc-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.rc-caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}
.rc-serif-mark {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-pressed); }

::selection { background: var(--rc-teal-200); color: var(--rc-navy-900); }