/* ==========================================================================
   Let's Find Family! — H5P brand skin
   --------------------------------------------------------------------------
   Purpose:  make the interactive activities match the course pages.
   Scope:    loaded INSIDE the H5P iframe only, via the plugin's own
             h5p_alter_library_styles hook. Parent-page CSS cannot reach in
             there, which is why this is a separate file.
   Method:   re-maps H5P's own theme variables. No content type is targeted
             individually, so this keeps working for activities added later.
   Palette:  cream #fbf7f0 · warm #f3ece0 · line #e2d9c9 · ink #26241f
             olive #6f8a3e · deep olive #53682d
   Left alone on purpose: the correct / incorrect feedback colours. Those
   need to read as right and wrong, not as brand colours.
   ========================================================================== */

html:root {

  /* --- primary call to action: H5P blue -> olive ------------------------ */
  --h5p-theme-main-cta-base: #6f8a3e;
  --h5p-theme-main-cta-dark: #53682d;
  --h5p-theme-main-cta-light: #82a054;
  --h5p-theme-contrast-cta: #fbf7f0;
  --h5p-theme-contrast-cta-white: #6f8a3e;
  --h5p-theme-contrast-cta-light: color-mix(in srgb, #6f8a3e, transparent 90%);
  --h5p-theme-focus: #6f8a3e;

  /* --- secondary call to action ---------------------------------------- */
  --h5p-theme-secondary-cta-base: #efe7d9;
  --h5p-theme-secondary-cta-dark: #e2d9c9;
  --h5p-theme-secondary-cta-light: #f6f0e6;
  --h5p-theme-secondary-contrast-cta: #26241f;
  --h5p-theme-secondary-contrast-cta-hover: #f3ece0;

  /* --- surfaces --------------------------------------------------------- */
  --h5p-theme-background: #fbf7f0;
  --h5p-theme-ui-base: #ffffff;
  --h5p-theme-alternative-base: #f3ece0;
  --h5p-theme-alternative-light: #f6f0e6;
  --h5p-theme-alternative-dark: #e9e0d0;
  --h5p-theme-alternative-darker: #e2d9c9;

  /* --- strokes ---------------------------------------------------------- */
  --h5p-theme-stroke-1: #e2d9c9;
  --h5p-theme-stroke-2: #efe7d9;
  --h5p-theme-stroke-3: #e2d9c9;

  /* --- text ------------------------------------------------------------- */
  --h5p-theme-text-primary: #26241f;
  --h5p-theme-text-secondary: #55504a;
  --h5p-theme-text-third: #7a7268;

  /* --- typeface --------------------------------------------------------- */
  --h5p-theme-font-name: Verdana, Geneva, sans-serif;
}

/* Older content types set their font on the container rather than reading
   the theme variable. Icon fonts declare their own family and are safe. */
.h5p-content,
.h5p-container {
  font-family: Verdana, Geneva, sans-serif;
}