/* ============================================================
   BEC FAYE — Design Foundations
   Colors + Type tokens for the Bec Faye coaching brand.
   Warm, earthy, calming. Built for the nervous system.
   ============================================================ */

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

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Evolved "sunset earth" palette — grounding, calming, hopeful.
     Drawn from the brand hero: golden light, clay, blush, sage. */

  /* Terracotta / clay — grounding warmth, the earth underfoot */
  --bf-terracotta: rgb(193, 122, 91);  /* #C17A5B */

  /* Amber / gold — warm light & hope (primary accent) */
  --bf-amber:      rgb(216, 162, 92);  /* #D8A25C */
  --bf-tan:        rgb(201, 168, 130); /* #C9A882  — softer gold (borders, fills) */
  --bf-tan-soft:   rgb(225, 210, 192); /* #E1D2C0  — soft warm borders */

  /* Dusty rose / blush — soft, nervous-system calm */
  --bf-blush:      rgb(205, 156, 141); /* #CD9C8D */

  /* Sage — grounded, living hope (new growth) */
  --bf-sage:       rgb(151, 162, 131); /* #97A283 */

  /* Browns — text, headings, dark surfaces */
  --bf-brown:      rgb(107, 78, 61);    /* #6B4E3D  — body text, links */
  --bf-brown-deep: rgb(92, 64, 51);     /* #5C4033  — display headings */

  /* Warm neutrals — backgrounds & surfaces */
  --bf-cream:      rgb(250, 247, 242);  /* #FAF7F2  — page background */
  --bf-sand:       rgb(245, 236, 227);  /* #F5ECE3  — tinted surface / badge */
  --bf-white:      rgb(255, 255, 255);  /* #FFFFFF  — cards, alt sections */

  /* Ink — logo / highest-contrast charcoal (use sparingly) */
  --bf-ink:        rgb(43, 43, 43);     /* #2B2B2B */

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --bg-page:        var(--bf-cream);
  --bg-alt:         var(--bf-white);
  --bg-tinted:      var(--bf-sand);
  --surface-card:   var(--bf-white);
  --surface-card-2: var(--bf-cream);

  --fg-heading:     var(--bf-brown-deep);
  --fg-body:        var(--bf-brown);
  --fg-muted:       rgba(107, 78, 61, 0.72);
  --fg-on-accent:   var(--bf-white);

  --accent:         var(--bf-amber);
  --accent-warm:    var(--bf-terracotta);
  --accent-calm:    var(--bf-blush);
  --accent-ground:  var(--bf-sage);
  --accent-strong:  var(--bf-brown);
  --border-soft:    var(--bf-tan-soft);
  --border-accent:  var(--bf-tan);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- TYPE SCALE (from becfaye.com) ---------- */
  --fs-hero:    60px;  /* Playfair 700, hero H1 */
  --fs-h2:      48px;  /* Playfair 700, section heads */
  --fs-h3:      24px;  /* Poppins / Playfair, subtitle */
  --fs-stat:    72px;  /* Poppins 400, price / big number */
  --fs-lead:    20px;  /* Poppins 500, lead emphasis */
  --fs-body:    18px;  /* Poppins 400, default body */
  --fs-base:    16px;  /* Poppins 400/500, UI default */
  --fs-sm:      14px;  /* Poppins 400, captions / badges */
  --fs-eyebrow: 13px;  /* Poppins 500, uppercase tracked label */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-tight:   1.5;

  /* ---------- LETTER SPACING ---------- */
  --ls-display: -1.5px;   /* hero */
  --ls-h2:      -1.2px;   /* section heads */
  --ls-eyebrow: 1.3px;    /* uppercase labels */
  --ls-button:  0.8px;    /* button text */
  --ls-badge:   0.35px;

  /* ---------- RADII ---------- */
  --radius-sm:  8px;    /* buttons, badges */
  --radius-md:  10px;   /* callout panels */
  --radius-lg:  14px;   /* cards */
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-btn:  0px 1px 2px -1px rgba(0,0,0,0.1), 0px 1px 3px 0px rgba(0,0,0,0.1);
  --shadow-card: 0px 1px 3px rgba(92,64,51,0.06), 0px 8px 24px -12px rgba(92,64,51,0.12);
  --shadow-lift: 0px 12px 32px -10px rgba(92,64,51,0.18);

  /* ---------- SPACING (8pt-ish, from layout) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 104px;   /* section vertical padding (tight) */
  --space-10: 120px;  /* section vertical padding (default) */

  --container-max: 1011px;  /* site content width */
  --measure: 736px;         /* text column max-width */

  /* ---------- MOTION ---------- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.bf-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-heading);
}
.bf-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  color: var(--fg-heading);
}
.bf-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg-heading);
}
.bf-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.5;
  color: var(--fg-body);
}
.bf-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-heading);
}
.bf-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
}
.bf-stat {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--fg-body);
}
.bf-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-body);
}
.bf-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--fg-muted);
}