/* ============================================================
   PEFFMed Design System — Foundations
   Colors + Typography tokens
   Fonts: Barlow (Google) + Libre Baskerville (Google)
   Libre Baskerville is the brand serif — used for subheadings,
   pull quotes, italic accents, and the "Med" in the logo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ---- Brand palette (sampled from brand sheet) ---- */
  --ink:        #253642;  /* Deep charcoal-navy — primary text */
  --navy:       #104679;  /* Primary / Authority */
  --teal:       #73b3b5;  /* Accent / Energy */
  --cream:      #e8e1d8;  /* Background / Warmth */
  --mauve:      #70392c;  /* Secondary accent / Human */
  --slate:      #c3d3e0;  /* Neutral / Supporting */

  /* ---- Tints & shades (derived) ---- */
  --navy-700:   #0c3460;  /* hover / pressed navy */
  --navy-600:   #14528c;
  --navy-100:   #dbe5f0;  /* navy wash */
  --teal-600:   #5a9a9c;  /* teal hover */
  --teal-700:   #498082;
  --teal-100:   #dceceb;  /* teal wash */
  --mauve-600:  #5b2d22;  /* mauve hover */
  --mauve-100:  #ead9d3;  /* mauve wash */
  --cream-deep: #ddd5c9;  /* deeper cream / borders on cream */
  --cream-soft: #f3efe9;  /* lifted surface above cream */
  --slate-300:  #aebbcc;
  --white:      #fdfcfa;  /* warm white — never pure #fff */

  /* ---- Semantic surfaces ---- */
  --bg:           var(--cream);
  --surface:      var(--white);
  --surface-alt:  var(--cream-soft);
  --surface-navy: var(--navy);

  /* ---- Semantic text ---- */
  --fg:        var(--ink);          /* body */
  --fg-strong: var(--navy);         /* headings */
  --fg-muted:  #5d6b74;             /* captions, secondary */
  --fg-subtle: #8a949b;             /* hints, placeholders */
  --fg-on-dark:#eef2f6;             /* text on navy */
  --fg-on-dark-muted: #a9b9cb;

  /* ---- Borders & lines ---- */
  --border:        #d8cfc2;         /* hairline on cream */
  --border-strong: #c4b9a8;
  --border-on-dark: rgba(255,255,255,.16);
  --focus-ring:    var(--teal);

  /* ---- Semantic status ---- */
  --info:    var(--navy);
  --info-bg: var(--navy-100);
  --success: #3f7d6e;
  --success-bg: #dceae3;
  --warning: var(--mauve);
  --warning-bg: var(--mauve-100);

  /* ---- Overlays / scrims ---- */
  --scrim:        rgba(37,54,66,.48);
  --overlay-navy: rgba(16,70,121,.08);

  /* ============================================================
     Typography
     ============================================================ */
  --font-sans:  'Barlow', system-ui, -apple-system, sans-serif;
  --font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-extra:   800;

  /* Type scale (1.250 major-third-ish, tuned) */
  --t-display: 4.5rem;   /* 72px — hero */
  --t-h1:      3rem;     /* 48px */
  --t-h2:      2.25rem;  /* 36px */
  --t-h3:      1.625rem; /* 26px */
  --t-h4:      1.25rem;  /* 20px */
  --t-lead:    1.375rem; /* 22px — Baskerville italic subhead */
  --t-body:    1.0625rem;/* 17px */
  --t-small:   0.9375rem;/* 15px */
  --t-caption: 0.8125rem;/* 13px */
  --t-label:   0.75rem;  /* 12px — tracked label */

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.55;
  --tracking-label: 0.14em;
  --tracking-tight: -0.01em;

  /* ============================================================
     Spacing — 4px base
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* ---- Radii ---- */
  --r-sm:   4px;
  --r-md:   6px;   /* buttons, inputs */
  --r-lg:   10px;  /* cards */
  --r-xl:   16px;
  --r-pill: 999px;

  /* ---- Shadows — warm-toned, navy/mauve based, no harsh black ---- */
  --shadow-sm:  0 1px 2px rgba(37,54,66,.06), 0 1px 3px rgba(16,70,121,.06);
  --shadow-md:  0 2px 6px rgba(37,54,66,.07), 0 6px 16px rgba(16,70,121,.08);
  --shadow-lg:  0 8px 24px rgba(16,70,121,.10), 0 16px 40px rgba(37,54,66,.10);
  --shadow-mauve: 0 8px 28px rgba(112,57,44,.16);
  --shadow-focus: 0 0 0 3px rgba(115,179,181,.45);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  200ms;
}

/* ============================================================
   Semantic element defaults (opt-in via .ds-prose or base)
   ============================================================ */
.ds-display {
  font-family: var(--font-sans);
  font-weight: var(--w-extra);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
.ds-h1 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.ds-h2 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--t-h2); line-height: var(--lh-snug); color: var(--fg-strong); }
.ds-h3 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--fg-strong); }
.ds-h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-h4); line-height: var(--lh-snug); color: var(--fg-strong); }
.ds-lead { font-family: var(--font-serif); font-style: italic; font-weight: var(--w-regular); font-size: var(--t-lead); line-height: var(--lh-normal); color: var(--mauve); }
.ds-body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--t-body); line-height: var(--lh-normal); color: var(--fg); }
.ds-small { font-family: var(--font-sans); font-size: var(--t-small); line-height: var(--lh-normal); color: var(--fg-muted); }
.ds-caption { font-family: var(--font-sans); font-size: var(--t-caption); line-height: var(--lh-normal); color: var(--fg-muted); }
.ds-label {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--teal-700);
}