/* ============================================================
   SINGELLA VOICE STUDIO — Brand foundations
   Source: singella_sss.pdf (brand style guide)
   ============================================================ */

/* Fonts: Besley (header) + Manrope (body) are the brand's own fonts,
   available on Google Fonts. The "Singella" wordmark (Moonic) is preserved
   as a transparent PNG asset; the "Brooklyn" tagline face is substituted
   with Besley for the "Sing Speak Shine" slogan. */
@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Core palette (from style guide p.06) ---- */
  --white:    #FFFFFF;
  --cream:    #FBF7F0;   /* warm off-white, main surface */
  --tan:      #C9B89E;   /* secondary surface */
  --tan-soft: #E4D9C7;   /* lighter tan tint */
  --crimson:  #F12524;   /* primary brand red */
  --crimson-deep: #D11A1A;
  --maroon:   #3B0016;   /* deep accent */
  --maroon-80: rgba(59, 0, 22, 0.80);

  /* ---- Semantic foreground ---- */
  --fg1: #2A1218;        /* primary text — near-maroon ink */
  --fg2: #6B5159;        /* secondary text */
  --fg3: #9A8890;        /* muted / captions */
  --on-dark1: #FBF7F0;   /* text on maroon */
  --on-dark2: #C9B89E;

  /* ---- Type families ---- */
  --font-display: 'Besley', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  /* ---- Type scale ---- */
  --t-hero: clamp(3rem, 8vw, 7rem); /* @kind font */
  --t-h1: clamp(2.4rem, 5vw, 4rem); /* @kind font */
  --t-h2: clamp(1.9rem, 3.4vw, 2.9rem); /* @kind font */
  --t-h3: 1.4rem;
  --t-body: 1.0625rem;
  --t-lede: clamp(1.15rem, 1.6vw, 1.35rem); /* @kind font */
  --t-eyebrow: 0.8rem;

  /* ---- Spacing / radius ---- */
  --section-pad: clamp(5rem, 11vw, 9rem);
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;
  --maxw: 1180px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
}

/* ---- Semantic element styles ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}
.display-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.display-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.08;
}
.lede {
  font-family: var(--font-body);
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--fg2);
}
.body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--fg2);
}