/* ============================================================================
   PubMedico Design System — Core tokens
   ----------------------------------------------------------------------------
   Palette and type derived from pubmedico.com brand posture: a medical-academic
   consultancy in Jodhpur, Rajasthan serving MD/MS candidates and PhD researchers.
   Brand blue #255f8e sampled from the official Pubmedico wordmark
   (assets/logo-pubmedico.png). Note: --teal-* token names are legacy — they
   carry blue values. Prefer --blue-* aliases in new code.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -------------------------------------------------------------------------
     COLOR — Primary (Stethoscope Blue)
     Sampled directly from the Pubmedico wordmark: #255f8e — a deep, desaturated
     steel blue. Legacy --teal-* names retained as aliases; prefer --blue-*.
     ------------------------------------------------------------------------- */
  --blue-50:  #ecf2f7;
  --blue-100: #cfdfec;
  --blue-200: #9dbcd6;
  --blue-300: #6b99bf;
  --blue-400: #4278a4;
  --blue-500: #255f8e;  /* primary — sampled from logo */
  --blue-600: #1d4c72;
  --blue-700: #163a57;
  --blue-800: #102a40;
  --blue-900: #0a1d2d;

  /* Legacy teal-* aliases — carry the blue values. Do not remove. */
  --teal-50:  var(--blue-50);
  --teal-100: var(--blue-100);
  --teal-200: var(--blue-200);
  --teal-300: var(--blue-300);
  --teal-400: var(--blue-400);
  --teal-500: var(--blue-500);
  --teal-600: var(--blue-600);
  --teal-700: var(--blue-700);
  --teal-800: var(--blue-800);
  --teal-900: var(--blue-900);

  /* -------------------------------------------------------------------------
     COLOR — Secondary (Citation Navy)
     For headings, body copy, and serious-feeling surfaces. Reference to the
     deep navy of scholarly publication covers.
     ------------------------------------------------------------------------- */
  --navy-50:  #f1f4f8;
  --navy-100: #e0e7ef;
  --navy-200: #c0ccdc;
  --navy-300: #94a6bd;
  --navy-400: #657b96;
  --navy-500: #44597a;
  --navy-600: #334661;
  --navy-700: #23334a;  /* body text on white */
  --navy-800: #17233a;
  --navy-900: #0d1729;  /* near-black for display headlines */

  /* -------------------------------------------------------------------------
     COLOR — Accent (Marigold)
     Warm, restrained callout color. Nods to Rajasthani marigold without going
     saturated-orange. Use sparingly: CTAs, highlights, "new" markers.
     ------------------------------------------------------------------------- */
  --marigold-50:  #fdf6e8;
  --marigold-100: #faeac3;
  --marigold-200: #f5d585;
  --marigold-300: #edbb4a;
  --marigold-400: #dca023;  /* accent */
  --marigold-500: #b98116;
  --marigold-600: #8f6210;

  /* -------------------------------------------------------------------------
     COLOR — Neutral (Paper)
     Warm off-white background, not cold gray. Pages and cards feel like
     matte journal paper rather than chrome.
     ------------------------------------------------------------------------- */
  --paper-0:   #ffffff;
  --paper-50:  #faf8f4;  /* default page bg */
  --paper-100: #f3efe6;
  --paper-200: #e8e2d4;
  --paper-300: #d4cdbb;
  --paper-400: #a69e8a;
  --paper-500: #706a5b;
  --paper-600: #4a463c;
  --paper-700: #2e2b26;

  /* -------------------------------------------------------------------------
     COLOR — Semantic
     ------------------------------------------------------------------------- */
  --success: #1f8f7e;       /* independent green for semantic success */
  --success-bg: #eefaf7;
  --warning: #dca023;       /* marigold-400 */
  --warning-bg: #fdf6e8;
  --danger:  #c0413a;
  --danger-bg: #fbece9;
  --info:    #2b6cb0;
  --info-bg: #eaf2fb;

  /* -------------------------------------------------------------------------
     COLOR — Semantic surface tokens (use these in components)
     ------------------------------------------------------------------------- */
  --fg-1: var(--navy-900);     /* primary text */
  --fg-2: var(--navy-700);     /* body text */
  --fg-3: var(--navy-500);     /* secondary / meta */
  --fg-4: var(--navy-400);     /* tertiary / placeholder */
  --fg-inverse: var(--paper-0);

  --bg-1: var(--paper-50);     /* app background */
  --bg-2: var(--paper-0);      /* cards */
  --bg-3: var(--paper-100);    /* subtle sections */
  --bg-4: var(--paper-200);    /* hover on neutral surface */

  --border-1: var(--paper-200);
  --border-2: var(--paper-300);
  --border-strong: var(--navy-800);

  --brand: var(--teal-500);
  --brand-hover: var(--teal-600);
  --brand-press: var(--teal-700);
  --brand-fg-on: var(--paper-0);

  --accent: var(--marigold-400);
  --accent-hover: var(--marigold-500);

  /* -------------------------------------------------------------------------
     TYPE — Families
     Display serif (Fraunces) for headings — academic, editorial, warm.
     Body sans (Inter) for UI + running copy — neutral, legible.
     Mono (JetBrains Mono) for DOIs, citations, data.
     ------------------------------------------------------------------------- */
  --font-serif-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* -------------------------------------------------------------------------
     TYPE — Scale (modular, 1.2 minor third up from 16px)
     ------------------------------------------------------------------------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  84px;

  --lh-tight: 1.12;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.14em;

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

  /* -------------------------------------------------------------------------
     RADII
     ------------------------------------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* -------------------------------------------------------------------------
     ELEVATION
     Soft, warm shadows — offsets are positive-y, blurs are generous,
     spreads are small. Never use cold / neutral-gray shadows.
     ------------------------------------------------------------------------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(23, 35, 58, 0.06), 0 1px 1px rgba(23, 35, 58, 0.04);
  --elev-2: 0 2px 6px rgba(23, 35, 58, 0.07), 0 4px 14px rgba(23, 35, 58, 0.05);
  --elev-3: 0 8px 24px rgba(23, 35, 58, 0.09), 0 2px 6px rgba(23, 35, 58, 0.05);
  --elev-4: 0 18px 48px rgba(23, 35, 58, 0.14), 0 4px 10px rgba(23, 35, 58, 0.06);
  --inset-1: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* -------------------------------------------------------------------------
     MOTION
     Calm, editorial motion. No bounces, no elastics.
     ------------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ===========================================================================
   SEMANTIC ELEMENT STYLES
   Apply to a container or to <body>. Gives you correct defaults for free.
   =========================================================================== */
.pm-type body,
body.pm-type {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pm-type h1, .pm-h1 {
  font-family: var(--font-serif-display);
  font-weight: 500;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
  margin: 0;
}

.pm-type h2, .pm-h2 {
  font-family: var(--font-serif-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
  margin: 0;
}

.pm-type h3, .pm-h3 {
  font-family: var(--font-serif-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-variation-settings: "opsz" 24;
  margin: 0;
}

.pm-type h4, .pm-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.pm-type .pm-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--teal-600);
}

.pm-type p, .pm-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

.pm-type .pm-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.pm-type .pm-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.pm-type code, .pm-code, .pm-citation {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-100);
  color: var(--navy-800);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-1);
}

.pm-type blockquote, .pm-quote {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-body);
  color: var(--fg-1);
  border-left: 2px solid var(--brand);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: 0;
}