/* Concinnity theme. Loaded on the player page and inside the H5P iframe.
   To add a theme (e.g. TIMS): copy this file to shared/themes/<name>.css, change the values,
   and set "theme": "<name>" in h5p/<slug>.json. */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Lato:wght@400;700&display=swap');

:root {
  --cx-bg: #FBF6F4;            /* Snow */
  --cx-surface: #FFFFFF;
  --cx-text: #333333;          /* Jet */
  --cx-border: #F5E9DF;        /* Linen */
  /* Warm palette only: branding advice (Oct 2026) is not to use Deep Jungle Green.
     Warm colours take Jet text/icons, never white (white on Amber is 1.6:1). */
  --cx-accent: #FFC100;        /* Amber: play + nav buttons (Jet icon 7.8:1) */
  --cx-accent-hover: #FF9C00;  /* Orange Peel (Jet 6.0:1) */
  --cx-on-accent: #333333;     /* Jet */
  --cx-playing: #FF6334;       /* Portland Orange: button while audio plays (Jet icon 4.3:1) */
  --cx-focus: #333333;         /* Jet focus ring (11.8:1 on Snow) */
  --cx-link: #5969D4;          /* Royal Blue Light: text links, underlined (4.8:1 on white) */

  --cx-font-heading: 'Comfortaa', 'Lato', system-ui, sans-serif;
  /* Arabic falls through to the device's Arabic font (Lato has no Arabic glyphs). */
  --cx-font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', Tahoma, sans-serif;

  --cx-word-size: clamp(22px, 6.5vw, 28px);
  --cx-body-size: 18px;
  --cx-play-size: 56px;

  /* H5P core theme variables (newer libraries read these) */
  --h5p-theme-main-cta-base: var(--cx-accent);
  --h5p-theme-main-cta-light: var(--cx-accent-hover);
  --h5p-theme-main-cta-dark: var(--cx-accent-hover);
  --h5p-theme-contrast-cta: var(--cx-on-accent);
  --h5p-theme-text-primary: var(--cx-text);
  --h5p-theme-font-name: var(--cx-font-body);
}