/* ============================================================
   A Gem of Joy ABA — Colors & Type
   "Shining Brighter, Together.™"
   Import alongside fonts/fonts.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  /* Deep navy — the wordmark color, primary ink, anchors the playful palette */
  --navy:        #182850;
  --navy-700:    #243766;
  --navy-600:    #33497d;

  /* Logo gradient — ocean blue → joy teal (the "burst" mark) */
  --blue:        #3E89C9;
  --blue-600:    #2F73B0;
  --teal:        #3FB0B8;
  --teal-600:    #2E949B;

  /* Warm heart coral — the signature joyful accent (photo backdrops, CTAs) */
  --coral:       #F26770;
  --coral-600:   #E2505B;   /* hover / pressed */
  --coral-bright:#F8505F;   /* full-bleed section fields */

  /* Sunshine yellow — sparing highlight accent (hand-drawn "joy" marks) */
  --sun:         #FFD84E;
  --sun-600:     #F2C32E;

  /* ---------- SURFACES & NEUTRALS (warm-tinted) ---------- */
  --cream:       #FBF4F1;   /* default warm page background */
  --white:       #FFFFFF;
  --surface:     #FFFFFF;   /* cards */
  --surface-alt: #F4F7FB;   /* cool tint panels */

  --ink:         #182850;   /* = navy, primary text */
  --ink-2:       #4A567A;   /* secondary text / labels */
  --ink-3:       #828BA6;   /* muted / captions */
  --line:        #E6E1DC;   /* warm hairline borders */
  --line-cool:   #DCE6F0;   /* cool hairline on blue panels */

  /* ---------- SEMANTIC ---------- */
  --success:     #5CA86B;
  --warning:     #F2A03E;
  --danger:      #E2505B;
  --info:        #3E89C9;

  /* ---------- GRADIENTS ---------- */
  --grad-burst:  linear-gradient(120deg, var(--blue) 0%, var(--teal) 100%);
  --grad-coral:  linear-gradient(120deg, var(--coral) 0%, var(--coral-bright) 100%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Poppins', system-ui, sans-serif;  /* headings */
  --font-body:    'Nunito',  system-ui, sans-serif;  /* body, UI */

  /* ---------- TYPE SCALE (fluid-friendly base) ---------- */
  --fs-display:  clamp(2.75rem, 5vw, 4rem);    /* hero */
  --fs-h1:       clamp(2.1rem, 3.4vw, 3rem);
  --fs-h2:       clamp(1.6rem, 2.4vw, 2.1rem);
  --fs-h3:       1.375rem;
  --fs-h4:       1.125rem;
  --fs-lead:     1.25rem;
  --fs-body:     1.0625rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;

  --lh-tight:    1.12;
  --lh-snug:     1.3;
  --lh-body:     1.65;

  --ls-tight:    -0.02em;
  --ls-wide:     0.04em;

  /* ---------- RADII ---------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 999px;
  --r-blob: 48% 52% 55% 45% / 52% 45% 55% 48%; /* soft organic blob */

  /* ---------- SHADOWS (soft, warm, never harsh) ---------- */
  --sh-sm:  0 2px 6px rgba(24,40,80,0.06);
  --sh-md:  0 8px 24px rgba(24,40,80,0.10);
  --sh-lg:  0 18px 48px rgba(24,40,80,0.14);
  --sh-coral: 0 14px 32px rgba(242,103,112,0.32);  /* CTA glow */

  /* ---------- SPACING (8px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---------- MOTION ---------- */
  --ease-soft: cubic-bezier(0.34, 1.16, 0.64, 1); /* gentle overshoot */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  420ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--navy);
}

p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: var(--lh-snug); }
small, .caption { font-size: var(--fs-xs); color: var(--ink-3); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--coral);
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--navy); }

/* Highlight word treatment — coral or yellow emphasis used in headings */
.hl-coral { color: var(--coral); }
.hl-yellow { color: var(--sun-600); }
.hl-teal { color: var(--teal-600); }