/* =========================================================
   Pennant Design System — Colors & Type
   ---------------------------------------------------------
   Derived from pennantgroup.com — a warm, hopeful,
   healthcare brand built on deep navy + a rich gold accent,
   cream neutrals, and generously-kerned serif headlines.
   ========================================================= */

/* -- Webfonts (Google Fonts fallbacks; see README for flag) -- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Brand primitives (sampled from real Pennant logo) ---------- */

  /* Teal-Blue — primary brand color (logo wordmark + flag stripes) */
  --teal-900: #1A4A60;
  --teal-800: #245C7A;
  --teal-700: #2D6E8C;   /* primary — matches logo wordmark */
  --teal-600: #3F84A4;
  --teal-500: #5A9CB8;
  --teal-300: #A8C7D4;
  --teal-100: #DCE8EE;

  /* Green — secondary (logo accent stripe) */
  --green-800: #1F7A4A;
  --green-700: #2A9059;
  --green-600: #3CA866;   /* primary accent — matches logo green stripe */
  --green-500: #62BE83;
  --green-300: #A8D9B8;
  --green-100: #DDEFE2;

  /* Backwards-compat aliases (legacy navy/gold token names map to brand colors) */
  --navy-900: var(--teal-900);
  --navy-800: var(--teal-700);
  --navy-700: var(--teal-600);
  --navy-600: var(--teal-500);
  --navy-500: var(--teal-300);
  --gold-700: var(--green-800);
  --gold-600: var(--green-700);
  --gold-500: var(--green-600);
  --gold-400: var(--green-500);
  --gold-300: var(--green-300);
  --gold-200: var(--green-100);

  /* Cream / Sand — body backgrounds, cards, page chrome */
  --cream-50:  #FBF8F2;
  --cream-100: #F4F1E8;
  --cream-200: #E8E3D2;
  --cream-300: #D5CFB6;

  /* Sage — supportive secondary */
  --sage-600: #4F6F5A;
  --sage-500: #6B8A74;
  --sage-200: #C6D4C4;

  /* Neutrals */
  --ink-900: #1A1A1A;
  --ink-700: #3A3A3A;
  --ink-500: #6E6E6E;
  --ink-400: #8A8A8A;
  --ink-300: #BDBDBD;
  --ink-200: #DEDEDE;
  --ink-100: #EFEFEF;
  --white:   #FFFFFF;

  /* Semantic */
  --bg:            var(--cream-50);
  --bg-alt:        var(--cream-100);
  --bg-inverse:    var(--teal-800);
  --surface:       var(--white);
  --surface-alt:   var(--cream-100);

  --fg:            var(--teal-900);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-400);
  --fg-inverse:    var(--cream-50);

  --accent:        var(--green-600);
  --accent-hover:  var(--green-700);
  --accent-soft:   var(--green-100);

  --border:        var(--cream-300);
  --border-strong: var(--teal-700);
  --divider:       rgba(45, 110, 140, 0.14);

  /* Status */
  --success: var(--green-700);
  --warning: #D89A2E;
  --danger:  #B1472A;

  /* ---------- Type ---------- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (modular, 1.22 ratio, anchored at 16px body) */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   88px;

  --leading-tight:  1.08;
  --leading-snug:   1.22;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;   /* eyebrow labels */
  --tracking-wider: 0.18em;   /* all-caps micro */

  /* ---------- Spacing ---------- */
  --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 ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 46, 79, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 46, 79, 0.08);
  --shadow-md: 0 8px 20px rgba(16, 46, 79, 0.10);
  --shadow-lg: 0 18px 40px rgba(16, 46, 79, 0.14);
  --shadow-inset: inset 0 1px 2px rgba(11, 37, 64, 0.08);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med:  280ms;
  --dur-slow: 520ms;
}

/* ---------- Semantic type classes ----------
   Use via <h1 class="h1">... or raw tag styling below */

html { color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.eyebrow, .ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--green-700);
}

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--navy-900);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--navy-900);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--navy-900);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--navy-900);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--navy-900);
}

p, .p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--ink-700);
  text-wrap: pretty;
}
.lead {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--navy-800);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.stat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-5xl);
  color: var(--green-600);
  line-height: 1;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--green-600); text-decoration-thickness: 1.5px; }
a:hover { color: var(--green-700); }