/* ==========================================================================
   RENEE'S TINY TREASURES DAYCARE
   base.css, fonts, design tokens, resets, base elements, utilities
   Brand palette is drawn straight from the logo's gemstones. See docs/brand-guide.html.
   ========================================================================== */
:root{
  /* Neutrals */
  --tt-cream:   #FFF9EF;
  --tt-sand:    #FBEFD8;
  --tt-white:   #FFFFFF;
  --tt-ink:     #2B2A28;
  --tt-stone:   #6E6559;
  --tt-line:    #EADFC7;

  /* Logo gemstone colors */
  --tt-navy:    #1F3B52;  /* deep base / headings */
  --tt-blue:    #3B8FC4;  /* blue gem */
  --tt-blue-dk: #2B6E9C;
  --tt-yellow:  #F6C445;  /* yellow gem */
  --tt-orange:  #EF8C3C;  /* orange gem */
  --tt-purple:  #8B5FA8;  /* purple gem */
  --tt-pink:    #E1596C;  /* pink/ruby gem */
  --tt-green:   #689F65;  /* soft complement for accents. 3.12:1 on white, clears WCAG AA for large text (was #6FA96B at 2.78, which failed) */

  /* Type */
  --tt-display: 'Baloo 2', 'Nunito', -apple-system, Helvetica, Arial, sans-serif;
  --tt-ui:      'Nunito', -apple-system, Helvetica, Arial, sans-serif;

  /* Layout */
  --tt-maxw: 1200px;
  --tt-radius: 20px;
  --tt-section-y: clamp(56px, 8vw, 96px);
  --tt-gutter: clamp(24px, 5vw, 48px);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--tt-ui); color:var(--tt-ink); background:var(--tt-cream);
  line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block; max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--tt-display); font-weight:700; line-height:1.15;}
::selection{background:var(--tt-yellow); color:var(--tt-ink);}
:focus-visible{outline:3px solid var(--tt-blue); outline-offset:2px;}

.tt-wrap{max-width:var(--tt-maxw); margin:0 auto; padding-inline:var(--tt-gutter);}

/* ============ SHARED UI ============ */
.tt-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--tt-ui); font-weight:800; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tt-pink); margin-bottom:1rem;
}
.tt-eyebrow--blue{color:var(--tt-blue-dk);}
.tt-eyebrow--purple{color:var(--tt-purple);}
.tt-eyebrow--orange{color:var(--tt-orange);}
.tt-eyebrow--light{color:var(--tt-yellow);}
.tt-eyebrow--center{justify-content:center; width:100%;}

.tt-btn{
  display:inline-block; font-family:var(--tt-ui); font-weight:800; font-size:.95rem;
  text-decoration:none; padding:.85em 1.9em; border-radius:999px; border:2px solid transparent;
  transition:all .25s ease; cursor:pointer;
}
.tt-btn--primary{background:var(--tt-pink); color:#fff; box-shadow:0 8px 20px rgba(225,89,108,.35);}
.tt-btn--primary:hover{background:#cc455a; transform:translateY(-2px);}
.tt-btn--navy{background:var(--tt-navy); color:#fff;}
.tt-btn--navy:hover{background:#152a3b; transform:translateY(-2px);}
.tt-btn--outline{background:transparent; color:var(--tt-navy); border-color:var(--tt-navy);}
.tt-btn--outline:hover{background:var(--tt-navy); color:#fff;}
.tt-btn--ghost{background:transparent; color:var(--tt-navy); border-color:var(--tt-navy);}
.tt-btn--ghost:hover{background:var(--tt-navy); color:#fff;}
.tt-btn--ghost-light{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.8);}
.tt-btn--ghost-light:hover{background:#fff; color:var(--tt-navy); border-color:#fff;}

/* Section heading block */
.tt-section-head{text-align:center; max-width:640px; margin:0 auto 2.8rem;}
.tt-section-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem); color:var(--tt-navy); margin-bottom:.7rem;}
.tt-section-head p{color:var(--tt-stone); font-size:1.05rem;}