/* ============================================================
   The Little Circle sub-brand theme
   "A soft place for little people to land at the end of the week."

   Tokens sourced from the locked logo package (little-circle/design/):
   Jost + Signal Yellow on slate, shared with the parent Circle Studio
   brand. Primary mark: little-circle-logo-{1080,512}.{avif,webp,png}
   (white ring + yellow little ring on slate, endorsement built in).

   Include AFTER the base site styles on Little Circle pages only:
   <link rel="stylesheet" href="/assets/little-circle/theme.css">
   ============================================================ */

.little-circle {
  /* Core brand tokens (from logo package) */
  --lc-slate: #4a5260;       /* logo tile background */
  --lc-slate-deep: #2c313a;  /* darker slate, footers/contrast blocks */
  --lc-yellow: #f7ff02;      /* Signal Yellow, shared with parent brand */
  --lc-ink: #111;            /* headings on light */
  --lc-paper: #f6f6f3;       /* warm off-white page background */
  --lc-paper-2: #e7e7e3;     /* soft surface / card background */
  --lc-muted: #7c7c76;       /* secondary text on light */

  /* Softness cues for the 4–7 audience */
  --lc-radius: 24px;

  font-family: 'Jost', sans-serif;
  background: var(--lc-paper);
  color: var(--lc-ink);
}

/* Slate hero/contrast section, matching the logo tile */
.little-circle .lc-slate-block {
  background: var(--lc-slate);
  color: #fff;
}

/* Accent: use Signal Yellow sparingly, as the "little ring" of the page */
.little-circle .lc-accent { color: var(--lc-yellow); }
.little-circle .lc-btn {
  background: var(--lc-yellow);
  color: var(--lc-ink);
  border-radius: var(--lc-radius);
  padding: 0.75em 1.75em;
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
}

/* Endorsement line: "Part of The Circle Studio"
   (the primary logo lockup already carries THE CIRCLE STUDIO on top) */
.little-circle .lc-endorsement {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}