/* ============================================================
   Homespire · Edwin Oquendo Design System
   Direction D — Homespire Signature
   Core color + typography tokens

   Load in every design surface:
     <link rel="stylesheet" href="../colors_and_type.css">

   Fonts loaded via Google Fonts (matching production site).
   ============================================================ */

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

:root {
  /* -----------------------------------------------------------
     COLOR — Brand (Homespire Direction D)
     Pantone 268 C = plum · 7678 C = violet · 7667 C = warm gray
     ----------------------------------------------------------- */
  --plum:            #4F2D84;   /* Primary accent (Pantone 268 C)   */
  --plum-deep:       #3a1f66;   /* Hover / pressed / gradients      */
  --plum-tint:       rgba(79,45,132,0.08);
  --violet:          #67489D;   /* Secondary accent (Pantone 7678 C)*/
  --gray-warm:       #706F8C;   /* Tertiary (Pantone 7667 C)        */

  /* -----------------------------------------------------------
     COLOR — Surfaces (warm off-whites with a violet undertone)
     ----------------------------------------------------------- */
  --bg:              #f7f5fb;   /* Page background                  */
  --bg-2:            #ece7f4;   /* Section alternation, cards on bg */
  --bg-3:            #e2daf0;   /* Deeper tint (rare)               */
  --surface:         #ffffff;   /* Card / panel                     */
  --rule:            #d0c6e0;   /* Hairline borders                 */

  /* -----------------------------------------------------------
     COLOR — Ink (text)
     ----------------------------------------------------------- */
  --ink:             #0f0a24;   /* Primary text, headings           */
  --ink-2:           #241a3f;   /* Body copy                        */
  --muted:           #585271;   /* Meta, labels, captions           */

  /* -----------------------------------------------------------
     COLOR — Semantic
     ----------------------------------------------------------- */
  --success:         #2d7a52;
  --warn:            #b58a2e;
  --danger:          #a13a3a;
  --info:            var(--violet);

  /* Semantic aliases (map to brand tokens) */
  --accent:          var(--plum);
  --accent-deep:     var(--plum-deep);
  --accent-tint:     var(--plum-tint);
  --accent-2:        var(--violet);
  --accent-3:        var(--gray-warm);
  --fg-1:            var(--ink);
  --fg-2:            var(--ink-2);
  --fg-3:            var(--muted);

  /* -----------------------------------------------------------
     TYPOGRAPHY — Families
     ----------------------------------------------------------- */
  --font-display:    'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:       'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* -----------------------------------------------------------
     TYPOGRAPHY — Scale (matches homepage / article / calculator)
     ----------------------------------------------------------- */
  --fs-display-xl:   76px;   /* Home hero H1                     */
  --fs-display-lg:   64px;   /* Page-header H1 · Final CTA        */
  --fs-display-md:   56px;   /* Article H1 · Calc hero            */
  --fs-display-sm:   52px;   /* Section H2                        */
  --fs-h2:           36px;   /* Article H2 · Success              */
  --fs-h3:           26px;   /* Program card title                */
  --fs-h4:           22px;   /* Step · Field display              */
  --fs-body-lg:      22px;   /* Lede (Fraunces italic)            */
  --fs-body:         18px;   /* Article body                      */
  --fs-body-sm:      16px;   /* Default body                      */
  --fs-meta:         14px;   /* Card body / small copy            */
  --fs-caption:      13px;
  --fs-label:        11px;   /* JetBrains kicker / eyebrow        */
  --fs-mono-xs:      10px;   /* Mono meta                         */

  /* Line-heights */
  --lh-tight:        0.98;   /* Display                           */
  --lh-snug:         1.15;   /* Headings                          */
  --lh-body:         1.55;   /* Body                              */
  --lh-loose:        1.7;    /* Long-form article                 */

  /* Letter-spacing */
  --ls-display:      -0.035em;
  --ls-heading:      -0.02em;
  --ls-body:         -0.01em;
  --ls-label:        0.14em;
  --ls-kicker:       0.16em;

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

  /* -----------------------------------------------------------
     RADII
     ----------------------------------------------------------- */
  --r-sm:     4px;
  --r-btn:    6px;
  --r-card:   8px;
  --r-lg:     16px;
  --r-pill:   999px;

  /* -----------------------------------------------------------
     SHADOWS — subtle, warm, violet-tinted
     ----------------------------------------------------------- */
  --shadow-sm:   0  2px  8px rgba(31,26,20,0.06);
  --shadow-md:   0 12px 30px rgba(31,26,20,0.10);
  --shadow-lg:   0 20px 40px var(--accent-tint);
  --shadow-xl:   0 30px 80px rgba(31,26,20,0.15);
  --shadow-cta:  0 12px 30px rgba(0,0,0,0.30);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:        0.15s;
  --dur-base:        0.2s;
  --dur-slow:        0.25s;

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --container:       1280px;
  --container-sm:    920px;
  --gutter:          40px;
}

/* ================================================================
   SEMANTIC TYPE — apply directly to real elements
   ================================================================ */

.h-display,
.type-display {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-wrap: balance;
}

.h1, .type-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-wrap: balance;
}

.h2, .type-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.h3, .type-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.h4, .type-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--ls-body);
  color: var(--ink);
}

.lede, .type-lede {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
}

.p, .type-body {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

.meta, .type-meta {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--muted);
}

.mono, .type-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 400;
}

/* KICKER / EYEBROW — the signature mono-w-rule detail used everywhere */
.kicker, .type-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* Italic accent — the Fraunces italic phrase used inside headings */
em, .type-accent {
  font-style: italic;
  color: var(--accent);
  font-weight: inherit;
}

/* Baseline resets so tokens flow naturally */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}