/* MP Suite design tokens.
   One place to match the franchise site. Drop the exact brand hex in here and everything
   downstream follows. Typography inherits the theme so the plugin leans into the site. */

.mp-suite {
  /* Brand */
  --mp-primary: #3FA535;          /* Monkey Puzzle green (placeholder, swap for exact brand hex) */
  --mp-primary-dark: #2E7D27;
  --mp-primary-soft: #EAF5E8;
  --mp-accent: #FDB913;           /* sunny yellow */
  --mp-ink: #1F2A37;              /* headings / body */
  --mp-muted: #5B6770;            /* secondary text */
  --mp-bg: #FFFFFF;
  --mp-bg-soft: #F5F8F3;
  --mp-line: #E3E8E1;
  --mp-white: #FFFFFF;

  /* Five learning dimensions (from the campaign mockup) */
  --mp-exploration: #3FA535;
  --mp-creativity: #E5739F;
  --mp-connection: #F4B740;
  --mp-movement: #4C9FE0;
  --mp-stories: #8E7CC3;

  /* Form / feedback */
  --mp-success: #3FA535;
  --mp-error: #D7474B;

  /* Shape */
  --mp-radius: 16px;
  --mp-radius-sm: 10px;
  --mp-radius-pill: 999px;
  --mp-shadow: 0 6px 24px rgba(31, 42, 55, 0.08);
  --mp-shadow-sm: 0 2px 8px rgba(31, 42, 55, 0.06);

  /* Spacing scale */
  --mp-gap: 1rem;
  --mp-gap-lg: 1.75rem;

  /* Type (inherits theme family; we only set weight/scale) */
  --mp-font: inherit;
  --mp-h1: clamp(1.75rem, 4vw, 2.5rem);
  --mp-h2: clamp(1.4rem, 3vw, 1.9rem);
  --mp-lead: clamp(1rem, 2.2vw, 1.15rem);

  font-family: var(--mp-font);
  color: var(--mp-ink);
  box-sizing: border-box;
}

.mp-suite *,
.mp-suite *::before,
.mp-suite *::after { box-sizing: border-box; }

/* Shared primitives */
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border: 0; border-radius: var(--mp-radius-pill);
  background: var(--mp-primary); color: var(--mp-white); font-weight: 600;
  font-size: 1rem; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .15s ease, transform .15s ease;
}
.mp-btn:hover { background: var(--mp-primary-dark); transform: translateY(-1px); }
.mp-btn--ghost { background: transparent; color: var(--mp-primary); box-shadow: inset 0 0 0 2px var(--mp-primary); }
.mp-btn--ghost:hover { background: var(--mp-primary-soft); }
.mp-btn--block { width: 100%; }

.mp-card {
  background: var(--mp-white); border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius); box-shadow: var(--mp-shadow-sm); overflow: hidden;
}

.mp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}