/* BusyBuster webfonts.
   SUBSTITUTION NOTE: the BusyBuster logo wordmark is set in a chunky geometric
   sans we do not have files for. Nearest Google Fonts match: Poppins (ExtraBold).
   Body/UI: DM Sans — clean, geometric, professional ("Moneypenny-grade" polish).
   Replace with licensed brand fonts when available. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');
/* BusyBuster color tokens.
   Brand = near-black ink + the aqua "dot" from the logo (#5CE0E0).
   Aqua is an ACCENT — used for dots, highlights, tints and focus; never for
   long text. Text-safe teal steps (600–800) carry links and small accents. */

:root {
  /* — Brand anchors — */
  --bb-ink:  #0C0D0F;   /* logo black */
  --bb-aqua: #5CE0E0;   /* logo dot   */

  /* — Aqua scale — */
  --aqua-50:  #EEFBFB;
  --aqua-100: #DCF7F7;
  --aqua-200: #B6F0F0;
  --aqua-300: #5CE0E0;
  --aqua-400: #2CC8CC;
  --aqua-500: #14ADB3;
  --aqua-600: #0E8A91;
  --aqua-700: #0C6E75;
  --aqua-800: #0B565C;

  /* — Neutrals (slightly cool) — */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFB;
  --gray-50:  #F4F6F7;
  --gray-100: #ECEFF0;
  --gray-200: #DDE2E3;
  --gray-300: #C3CBCC;
  --gray-400: #9AA5A7;
  --gray-500: #717D7F;
  --gray-600: #545F61;
  --gray-700: #3D4648;
  --gray-800: #272D2F;
  --gray-900: #16191B;
  --gray-950: #0C0D0F;

  /* — Semantic — */
  --green-600: #1B8A5A;
  --green-50:  #E9F7F0;
  --amber-600: #B26205;
  --amber-50:  #FCF3E6;
  --red-600:   #C73E3E;
  --red-50:    #FBEDED;

  /* — Surfaces — */
  --surface-page:    var(--gray-0);
  --surface-section: var(--gray-50);   /* alternating light band */
  --surface-card:    var(--gray-0);
  --surface-ink:     var(--gray-950);  /* dark band / footer / CTA */
  --surface-tint:    var(--aqua-50);   /* aqua-tinted callout */

  /* — Text — */
  --text-primary:   var(--gray-950);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-inverse:   #FFFFFF;
  --text-inverse-secondary: rgba(255, 255, 255, 0.64);
  --text-link:      var(--aqua-700);

  /* — Accent aliases — */
  --accent:        var(--bb-aqua);   /* dots, marks, highlights */
  --accent-strong: var(--aqua-600);  /* interactive accent, links, icons */
  --accent-deep:   var(--aqua-800);

  /* — Borders & focus — */
  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --focus-ring: 0 0 0 3px rgba(20, 173, 179, 0.35);
}
/* BusyBuster type tokens.
   Display: Poppins ExtraBold — chunky + geometric, echoes the logo wordmark.
   Body/UI: DM Sans — neutral, warm, highly legible.
   Headlines end with an aqua "dot." wherever it reads naturally (brand motif). */

:root {
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;

  /* — Sizes (desktop reference) — */
  --text-display: 64px;   /* hero only */
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 26px;
  --text-h4: 20px;
  --text-lead: 20px;      /* intro paragraph */
  --text-body: 17px;
  --text-small: 15px;
  --text-caption: 13px;

  /* — Weights — */
  --weight-display: 800;  /* Poppins ExtraBold, headings */
  --weight-heading: 700;
  --weight-medium: 500;
  --weight-regular: 400;

  /* — Line heights — */
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.6;

  /* — Tracking — */
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-caps: 0.08em;   /* eyebrow labels, uppercase */
}
/* BusyBuster spacing, radii, shadows, motion. 4px base grid. */

:root {
  /* — Spacing — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* — Layout — */
  --container-max: 1200px;
  --container-pad: 24px;
  --section-pad: var(--space-24);   /* vertical rhythm between site sections */

  /* — Radii: generous, friendly. Buttons are pills; cards are soft. — */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;     /* cards, photos */
  --radius-2xl: 32px;    /* hero media, big callouts */
  --radius-pill: 999px;

  /* — Shadows: soft, low-contrast, never harsh — */
  --shadow-card: 0 1px 2px rgba(12, 13, 15, 0.04), 0 8px 24px rgba(12, 13, 15, 0.06);
  --shadow-lift: 0 2px 4px rgba(12, 13, 15, 0.05), 0 16px 40px rgba(12, 13, 15, 0.10);
  --shadow-pop:  0 24px 64px rgba(12, 13, 15, 0.16);

  /* — Motion: quick, calm ease-outs; no bounces — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 250ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
}
/* Minimal base styles so specimens and kits inherit the brand by default. */

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

a { color: var(--text-link); }

::selection { background: var(--aqua-200); }