/* ============================================================
   Boca Grande Sitters — Color & Type Foundations
   Coastal boutique childcare. Soft, calm, trustworthy, polished.
   Import this file, then use the CSS variables below.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Headings: Quicksand — rounded, friendly, premium (matches the logo's
   rounded lowercase wordmark). Loaded from Google Fonts.
   Accent/serif: Cormorant Garamond — elegant editorial italic for pull
   quotes and refined accents (bundled TTF in /fonts).               */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700&display=swap');

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand palette ---------- */
  --periwinkle:      #7584A4;  /* primary brand */
  --periwinkle-soft: #AFBFE0;  /* the logo lockup background tint */
  --sage:            #B6B791;  /* muted olive */
  --seafoam:         #83A69C;  /* seafoam green */
  --coastal-blue:    #AFCCD0;  /* pale coastal blue */
  --navy:            #0A305E;  /* deep navy — text & anchors */

  /* ---------- Tints (airy section washes) ---------- */
  --periwinkle-wash: #EEF1F8;
  --seafoam-wash:    #EAF1EE;
  --coastal-wash:    #EDF4F5;
  --sage-wash:       #F2F2EA;
  --shell:           #FBFAF6;  /* warm off-white */
  --sand:            #F5F1E8;  /* cream band (matches illustration sheet) */

  /* ---------- Foregrounds ---------- */
  --fg-1: #102A4C;             /* primary text — deep navy ink */
  --fg-2: #45577A;             /* secondary text — slate periwinkle */
  --fg-3: #8693AD;             /* muted / captions */
  --fg-on-color: #FFFFFF;      /* text on periwinkle/navy fills */

  /* ---------- Surfaces ---------- */
  --bg:        #FFFFFF;
  --bg-raised: #FFFFFF;
  --hairline:  #E3E7EF;        /* soft borders */
  --hairline-warm: #ECE7DA;

  /* ---------- Functional ---------- */
  --link:        var(--periwinkle);
  --link-hover:  var(--navy);
  --focus-ring:  #AFBFE0;

  /* ---------- Type families ---------- */
  --font-display: 'Quicksand', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* ---------- Type scale ---------- */
  --text-xs:   0.78rem;   /* 12.5px — eyebrows, captions  */
  --text-sm:   0.9rem;    /* 14px   — fine print           */
  --text-base: 1.0625rem; /* 17px   — body                 */
  --text-lg:   1.25rem;   /* 20px   — lead / subhead        */
  --text-xl:   1.6rem;    /* 26px                           */
  --text-2xl:  2.1rem;    /* 34px   — h3                    */
  --text-3xl:  2.8rem;    /* 45px   — h2                    */
  --text-4xl:  3.6rem;    /* 58px   — h1                    */
  --text-5xl:  4.6rem;    /* 74px   — hero display          */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.62;

  /* ---------- Spacing (8pt-ish, soft) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ---------- Radii (generous, pill-forward) ---------- */
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   28px;
  --radius-xl:   40px;
  --radius-pill: 999px;

  /* ---------- Shadows (soft, diffuse, cool-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 42, 76, 0.05);
  --shadow-sm: 0 2px 10px rgba(16, 42, 76, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(16, 42, 76, 0.16);
  --shadow-lg: 0 24px 60px -24px rgba(16, 42, 76, 0.22);
  --shadow-card: 0 14px 40px -20px rgba(60, 80, 120, 0.28);
}

/* ============================================================
   Semantic element styles — use as a baseline or @extend mentally
   ============================================================ */

.bgs-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--periwinkle);
}

.bgs-h1, h1.bgs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.5vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.bgs-h2, h2.bgs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, var(--text-3xl));
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.bgs-h3, h3.bgs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.18;
  color: var(--fg-1);
}
.bgs-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--fg-1);
}

/* Editorial serif accent — pull quotes, refined one-liners */
.bgs-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, var(--text-2xl));
  line-height: 1.3;
  color: var(--fg-2);
}

.bgs-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--fg-2);
}
.bgs-body, p.bgs {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-2);
}
.bgs-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-3);
}