/* ============================================================
   MFA (Merriman Financial Advisors / Valor Investments and Planning)
   Core design tokens — colors, typography, spacing, radii, shadows.
   "The Financial Painter — for people close to Cancer."
   ============================================================ */

/* ---------- Google Fonts (substitutes; see README) ------------ */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:wght@300;400;700;900&display=swap');

:root {
  /* ============================================================
     COLORS — sampled directly from the brand banner.
     ============================================================ */

  /* --- Core brand hues --- */
  --mfa-teal:          #2ba88a;  /* primary brand teal — "Painter", "Start planning today" */
  --mfa-teal-bright:   #03c9a7;  /* bright accent teal — thin top stripes, hovers, highlights */
  --mfa-teal-mint:     #8dd4cf;  /* soft mint — illustrations, secondary accents */
  --mfa-red:           #7c2b37;  /* deep brand red — "Cancer", "Stop saying tomorrow" */
  --mfa-red-underline: #a13a49;  /* underline / emphasis red, slightly brighter */
  --mfa-navy:          #1a3a4a;  /* near-black navy — headlines, body */

  /* --- Soft tonal backgrounds (the three panels of the banner) --- */
  --mfa-blue-tint:   #d6eaf2;   /* left panel — soft blue */
  --mfa-cream:       #eef7fa;   /* center panel — near-white cool cream */
  --mfa-blush:       #f5e8ec;   /* right panel — pale blush pink */

  /* --- Neutrals / grays --- */
  --mfa-ink:         #1a3a4a;   /* primary text (= navy) */
  --mfa-ink-muted:   #4a6573;   /* secondary text, small labels */
  --mfa-ink-soft:    #7a8f99;   /* tertiary / metadata */
  --mfa-rule:        #c9d9df;   /* hairlines, dividers */
  --mfa-surface:     #ffffff;   /* default card / page background */
  --mfa-surface-alt: #f7fafb;   /* alternating rows, subtle sections */

  /* ---------- SEMANTIC color tokens ---------- */
  --fg-1:        var(--mfa-ink);          /* primary text */
  --fg-2:        var(--mfa-ink-muted);    /* secondary text */
  --fg-3:        var(--mfa-ink-soft);     /* tertiary text */
  --fg-accent:   var(--mfa-teal);         /* primary accent text (hope/forward) */
  --fg-urgent:   var(--mfa-red);          /* urgency / emphasis text */

  --bg-page:     var(--mfa-surface);
  --bg-soft:     var(--mfa-cream);
  --bg-blue:     var(--mfa-blue-tint);
  --bg-blush:    var(--mfa-blush);
  --bg-ink:      var(--mfa-navy);

  --accent:         var(--mfa-teal);
  --accent-hover:   #238c73;              /* teal darkened ~12% */
  --accent-press:   #1c7461;
  --accent-on:      #ffffff;

  --danger:         var(--mfa-red);
  --danger-hover:   #731321;
  --danger-on:      #ffffff;

  --border:      var(--mfa-rule);
  --border-strong: #96adb6;

  /* ============================================================
     TYPOGRAPHY
     ============================================================
     "Lora"  — serif, used for editorial + emotional display copy.
               (Substitute for the banner's serif headlines.)
     "Lato"  — humanist sans, used for UI, labels, body, buttons.
               (Substitute for the banner's sans-serif wordmark.)
     ============================================================ */

  --font-serif: 'Lora', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-sans:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — fluid-ish, major-third-ish */
  --fs-12:  0.75rem;    /* 12px — tiny label */
  --fs-13:  0.8125rem;
  --fs-14:  0.875rem;   /* 14px — small body, metadata */
  --fs-16:  1rem;       /* 16px — body base */
  --fs-18:  1.125rem;   /* 18px — long-form body */
  --fs-20:  1.25rem;    /* 20px — lead */
  --fs-24:  1.5rem;
  --fs-30:  1.875rem;
  --fs-36:  2.25rem;
  --fs-48:  3rem;
  --fs-60:  3.75rem;
  --fs-72:  4.5rem;
  --fs-96:  6rem;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Letter spacing — labels get wide tracking in this brand */
  --ls-label:    0.14em;   /* "FINANCIAL PLANNER", "VALOR INVESTMENTS AND PLANNING" */
  --ls-tight:    -0.01em;
  --ls-tighter:  -0.02em;
  --ls-normal:   0;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --sp-0:  0;
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  2.5rem;    /* 40 */
  --sp-8:  3rem;      /* 48 */
  --sp-9:  4rem;      /* 64 */
  --sp-10: 6rem;      /* 96 */
  --sp-11: 8rem;      /* 128 */

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-pill:  999px;

  /* ============================================================
     SHADOWS — soft, calm; never hard or dramatic.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(26, 58, 74, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 58, 74, 0.07);
  --shadow-md: 0 8px 20px rgba(26, 58, 74, 0.08);
  --shadow-lg: 0 20px 40px rgba(26, 58, 74, 0.10);
  --shadow-focus: 0 0 0 3px rgba(43, 168, 138, 0.35);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:   140ms;
  --dur-med:    220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   BASE RESET / BODY DEFAULTS
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size:   var(--fs-16);
  line-height: var(--lh-normal);
  color:       var(--fg-1);
  background:  var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these as ready-made styles (class or component mapping).
   ============================================================ */

.mfa-eyebrow {
  /* small gray/teal UPPERCASE label — "FINANCIAL PLANNER", "VALOR INVESTMENTS AND PLANNING" */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.mfa-h1 {
  /* hero display serif — "Cancer", big editorial statements */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(3rem, 7vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-1);
}

.mfa-h2 {
  /* section display serif */
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, var(--fs-60));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.mfa-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.mfa-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.mfa-lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.mfa-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}

.mfa-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.mfa-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.mfa-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-13);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.mfa-wordmark {
  /* "The Financial Painter." lockup style */
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-36);
  line-height: 1;
  letter-spacing: var(--ls-tighter);
  color: var(--fg-1);
}
.mfa-wordmark .accent { color: var(--accent); }
.mfa-wordmark .article {
  font-weight: 300;
  color: var(--fg-1);
}

/* Signature "Stop/Start" pattern */
.mfa-stop { color: var(--mfa-red); font-weight: 700; }
.mfa-start { color: var(--mfa-teal); font-weight: 700; }

/* Utility */
.mfa-underline-red {
  background-image: linear-gradient(var(--mfa-red-underline), var(--mfa-red-underline));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  padding-bottom: 4px;
}