/* ============================================================
   Creative Family Connections — Colors & Type Tokens
   ------------------------------------------------------------
   Sourced from the live site (creativefamilyconnections.com).
   Teal is the dominant brand color (logo blocks, primary CTAs);
   coral / pink is the friendly accent (logo type, italics,
   "everyone" emphasis). Photography is warm and human.
   ============================================================ */

/* --- FONTS ------------------------------------------------- */
/* Brand sans is Quicksand (variable, weights 300–700) — the rounded,
   friendly geometric used across CFC marketing surfaces. The italic
   serif accent (used only on the single word "everyone" in the
   tagline) remains a Playfair-style serif from Google Fonts; the
   brand has not provided a custom italic file. */
@font-face {
  font-family: "Quicksand";
  src: url("fonts/Quicksand-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Quicksand-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  /* ============================================================
     COLOR — BRAND
     Teal is taken from the dominant logo block color; pink/coral
     from the script lockup. Both have light tints used in soft
     section backgrounds and a deeper "ink" used for headings.
     ============================================================ */
  --cfc-teal-900: #0e4f55;          /* deep, used sparingly for ink-on-teal */
  --cfc-teal-700: #2c8a93;          /* primary brand teal — logo blocks */
  --cfc-teal-500: #3aa8b1;          /* hover / lighter teal */
  --cfc-teal-200: #cfeaec;          /* soft tint */
  --cfc-teal-50:  #effafa;          /* very-soft section bg */

  --cfc-coral-700: #d96a73;         /* deeper coral — heading accents */
  --cfc-coral-500: #e88891;         /* primary pink — logo type, italic emphasis */
  --cfc-coral-300: #f0aeb4;         /* softened, used in stats / icons */
  --cfc-coral-100: #fbe0e3;         /* tint */
  --cfc-coral-50:  #fdf2f4;         /* tint, section bg */

  /* Secondary accents — pulled from the rounded-blob shape illustration
     (box-shape-left.png) used as a soft decorative motif. */
  --cfc-amber-500: #e8b14b;         /* honey yellow */
  --cfc-amber-100: #fbecd0;
  --cfc-violet-500: #8b7fb5;        /* dusty lavender */
  --cfc-violet-100: #e7e3f3;

  /* ============================================================
     COLOR — NEUTRALS
     Warm-leaning grays so they sit comfortably against coral and
     warm photography. Backgrounds tend toward cream/ivory rather
     than pure white.
     ============================================================ */
  --cfc-ink:       #004B46;         /* primary heading text — brand deep teal */
  --cfc-ink-soft:  #3a4a4d;         /* body text, slightly softened */
  --cfc-mute:      #6b7b7e;         /* secondary text, captions */
  --cfc-line:      #d8dfe0;         /* hairlines, dividers */
  --cfc-line-soft: #eaedee;
  --cfc-cream:     #fbf6ee;         /* hero / section bg — the warm off-white seen behind the hero photo */
  --cfc-paper:     #ffffff;
  --cfc-off:       #f6f3ed;         /* subtle alt section bg */

  /* ============================================================
     SEMANTIC ROLES — apply these in components, not raw palette
     ============================================================ */
  --bg:           var(--cfc-paper);
  --bg-soft:      var(--cfc-cream);
  --bg-alt:       var(--cfc-off);
  --bg-tint:      var(--cfc-teal-50);

  --fg:           var(--cfc-ink);
  --fg-1:         var(--cfc-ink);
  --fg-2:         var(--cfc-ink-soft);
  --fg-3:         var(--cfc-mute);
  --fg-on-teal:   #ffffff;
  --fg-on-coral:  #ffffff;

  --brand:        var(--cfc-teal-700);
  --brand-hover:  var(--cfc-teal-500);
  --brand-deep:   var(--cfc-teal-900);
  --accent:       var(--cfc-coral-500);
  --accent-hover: var(--cfc-coral-700);

  --line:         var(--cfc-line);
  --line-soft:    var(--cfc-line-soft);

  /* ============================================================
     TYPE — FAMILIES
     The site is sans-serif (Open Sans) for everything readable,
     with an italic serif (Playfair-style) used VERY sparingly to
     emphasize a single word — most famously "everyone" in the
     tagline. Treat the italic serif as an accent, never body.
     ============================================================ */
  --font-sans:    "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Quicksand", var(--font-sans);   /* headings still sans, just heavier */
  --font-italic:  "Playfair Display", "Quicksand", Georgia, serif; /* the *everyone* italic */

  /* ============================================================
     TYPE — SIZES
     Display headings on the live site run large (h1 ≈ 56px,
     h2 ≈ 40px). Body is comfortable at 17px with generous leading.
     ============================================================ */
  --fs-display:  3.5rem;     /* 56px — hero h1 */
  --fs-h1:       2.75rem;    /* 44px */
  --fs-h2:       2.25rem;    /* 36px */
  --fs-h3:       1.625rem;   /* 26px */
  --fs-h4:       1.25rem;    /* 20px */
  --fs-eyebrow:  0.8125rem;  /* 13px — UPPERCASE label above headings */
  --fs-body:     1.0625rem;  /* 17px */
  --fs-body-lg:  1.1875rem;  /* 19px — intro paragraphs */
  --fs-small:    0.9375rem;  /* 15px */
  --fs-micro:    0.8125rem;  /* 13px */

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Leading */
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.55;
  --lh-relaxed:  1.7;

  /* Tracking */
  --ls-eyebrow:  0.18em;     /* eyebrows are wide-tracked uppercase */
  --ls-tight:    -0.01em;
  --ls-normal:   0;

  /* ============================================================
     SPACING — 4px base, generous on marketing surfaces
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;     /* big section padding (the site breathes) */

  /* ============================================================
     RADII — soft, generous. Photos use a tall organic mask
     (≈48px); cards 16-24px; pills are fully round.
     ============================================================ */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 36px;
  --r-photo: 48px;       /* the rounded-corner photo treatment */
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — restrained. Cards rely on a subtle lift, not depth.
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(31, 42, 44, 0.06);
  --shadow-md: 0 6px 18px rgba(31, 42, 44, 0.08);
  --shadow-lg: 0 18px 40px rgba(31, 42, 44, 0.10);
  --shadow-teal: 0 12px 28px rgba(44, 138, 147, 0.22);  /* lift under teal CTAs */

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 176ms;
  --dur-base: 264ms;
  --dur-slow: 462ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES — use these as classes or @extend mixins
   ============================================================ */
.cfc-display, h1.cfc {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-6);
}

.cfc-h2, h2.cfc {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

.cfc-h3, h3.cfc {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

.cfc-h4, h4.cfc {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

.cfc-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);                /* coral eyebrows above teal headings */
  margin: 0 0 var(--space-3);
  display: inline-block;
}

.cfc-body, p.cfc {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
}

.cfc-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.cfc-small  { font-size: var(--fs-small);  color: var(--fg-3); }
.cfc-micro  { font-size: var(--fs-micro);  color: var(--fg-3); }

/* The signature italic accent. Used on ONE word, not phrases. */
.cfc-italic-accent {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}