/* ════════════════════════════════════════════════════════════
   Jemmy Digital — AI & Digital Growth Audit
   THEME FILE
   ════════════════════════════════════════════════════════════

   This file controls the font, font sizes, and overall colour
   theme used throughout the entire audit tool.

   HOW TO USE:
   1. Change any value below
   2. Save this file
   3. Re-upload it to your server (same filename, same location)
   4. Refresh the page — no rebuilding, no coding required

   This file is shared by both the standalone site
   (aiaudit.jemmydigital.com.my) and the WordPress embed — editing
   it once updates both places.
   ════════════════════════════════════════════════════════════ */

:root {

  /* ── FONT ──────────────────────────────────────────────── */
  /* The font used everywhere in the app. If you want to switch
     to a different Google Font, the font also needs to be loaded
     elsewhere (in index.html for the standalone site, or inside
     embed-main.jsx for WordPress) — ask Claude to update that
     part too if you change this. */
  --jd-font-family: 'Poppins', -apple-system, sans-serif;


  /* ── FONT SIZES ────────────────────────────────────────── */
  --jd-font-size-h1: 38px;     /* Main page titles (homepage hero, Privacy Notice) */
  --jd-font-size-body: 17px;   /* Normal paragraph / body text throughout the app */
  --jd-font-weight-h1: 700; 


  /* ── COLOUR THEME ──────────────────────────────────────── */
  --jd-color-primary: #4b87c3;         /* Brand colour — buttons, links, headers, highlights */
  --jd-color-primary-bg: #EBF4FF;      /* Light tinted background that pairs with the brand colour (cards, badges) */
  --jd-color-primary-border: #c5ddf0;  /* Light tinted border that pairs with the brand colour */

  --jd-color-text: #2b2b2b;            /* Main body text colour, used almost everywhere */
  --jd-color-text-muted: #6B7280;      /* Secondary / lighter text colour (subtitles, captions) */

  --jd-color-background: #ffffff;      /* Page and card background colour */

}

/* ── APPLYING THE FONT ─────────────────────────────────────
   This makes the font above actually apply everywhere. You
   shouldn't need to touch this part. */
body, #root, #jd-audit-root {
  font-family: var(--jd-font-family);
}