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

   This file controls the font, font sizes, font weights, and
   overall colour theme for EVERY piece of text in the app —
   every heading, button, label, badge, and caption on every
   screen (homepage, contact form, quiz, report, admin dashboard,
   privacy policy).

   HOW TO USE:
   1. Find the section for the screen/element you want to change
      (use Ctrl+F / Cmd+F to search, e.g. search "QUIZ" or "REPORT")
   2. Change the value
   3. Save this file and re-upload it — no rebuilding required

   Sizes are in pixels (px). Weights are: 400=normal, 500=medium,
   600=semibold, 700=bold, 800=extra bold, 900=black.

   This file is shared by both the standalone site and the
   WordPress embed — editing it once updates both.
   ════════════════════════════════════════════════════════════ */

:root {


  /* ── FONT ── */
  --jd-font-family: 'Poppins', -apple-system, sans-serif; /* the typeface used everywhere */

  /* ── TYPE SCALE — shared across multiple screens ── */
  --jd-font-size-h1: 42px; /* biggest titles: homepage hero, Privacy Notice */
  --jd-font-weight-h1: 700;
  --jd-font-size-h2: 28px; /* section headings: "Who Is This For?", "Analysing Your Business" */
  --jd-font-weight-h2: 800;
  --jd-font-size-h3: 17px; /* card/subsection headings: Report's "Executive Summary" etc., Privacy Notice sections */
  --jd-font-weight-h3: 700;
  --jd-font-size-body: 17px; /* normal paragraph text throughout the app */

  /* ── COLOUR THEME ── */
  --jd-color-primary: #4b87c3; /* brand colour — buttons, links, headers, highlights */
  --jd-color-primary-bg: #EBF4FF; /* light tinted background pairing with the brand colour */
  --jd-color-primary-border: #c5ddf0; /* light tinted border pairing 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 */

  /* ── HOMEPAGE ── */
  --jd-text-landing-eyebrow-size: 15px; /* "Jemmy Digital" small brand label at the very top */
  --jd-text-landing-eyebrow-weight: 700;
  --jd-text-landing-pill-size: 10px; /* "Free Assessment" pill badge */
  --jd-text-landing-pill-weight: 700;
  --jd-text-landing-feature-size: 15px; /* the 4 pillar labels (Website & Conversion, etc.) */
  --jd-text-landing-feature-weight: 500;
  --jd-text-cta-hero-size: 15px; /* "Start My FREE Audit" main button */
  --jd-text-cta-hero-weight: 800;
  --jd-text-fineprint-size: 11px; /* "No obligation · Takes 5 minutes..." small print (appears twice) */
  --jd-text-tip-size: 12px; /* "You may need to refer to your website..." tip */
  --jd-text-persona-title-size: 17px; /* card titles in "Who Is This For" and "What You'll Walk Away With" */
  --jd-text-persona-title-weight: 700;
  --jd-text-persona-desc-size: 15px; /* card descriptions in those same sections */
  --jd-text-persona-emoji-size: 32px; /* the emoji icons in "Who Is This For" cards */
  --jd-text-walkaway-icon-size: 32px; /* the emoji icons in "What You'll Walk Away With" rows */
  --jd-text-cta-prompt-size: 17px; /* "Ready to find out how your business..." prompt */
  --jd-text-cta-prompt-weight: 700;
  --jd-text-cta-secondary-size: 17px; /* second "Start My FREE Audit" button (lower on the page) */
  --jd-text-cta-secondary-weight: 800;
  --jd-text-footer-link-size: 12px; /* "Privacy Policy" footer link */
  --jd-text-footer-copyright-size: 11px; /* copyright line at the very bottom */
  --jd-text-landing-subheadline-weight: 500; /* "Get your FREE AI Business Growth Assessment in 5 minutes" subheadline */
  --jd-text-trust-heading-size: 13px; /* "Trusted by 600+ Malaysian businesses" */
  --jd-text-trust-heading-weight: 700;
  --jd-text-trust-badge-size: 11px; /* each credential pill (Google Partner, HRD Corp Trainer, etc.) */
  --jd-text-trust-badge-weight: 600;

  /* ── CONTACT FORM ── */
  --jd-text-form-heading-size: 20px; /* "Personalise Your Audit" heading */
  --jd-text-form-heading-weight: 800;
  --jd-text-form-label-size: 15px; /* field labels (Full Name, Company, etc.) */
  --jd-text-form-label-weight: 600;
  --jd-text-form-input-size: 15px; /* text typed into the input fields */
  --jd-text-form-error-size: 11px; /* validation error messages under a field */
  --jd-text-form-button-size: 17px; /* "Begin My Audit" button */
  --jd-text-form-button-weight: 700;
  --jd-text-form-consent-size: 10.5px; /* PDPA consent fine print under the button */
  --jd-text-form-consent-link-weight: 600; /* the "Privacy Policy" link within that fine print */
  --jd-text-form-backlink-size: 12px; /* "Back" link below the form */

  /* ── QUIZ ── */
  --jd-text-quiz-sectionlabel-size: 11px; /* "Section X of Y" label */
  --jd-text-quiz-sectionlabel-weight: 700;
  --jd-text-quiz-pillartitle-size: 14px; /* pillar name next to the section label */
  --jd-text-quiz-pillartitle-weight: 700;
  --jd-text-quiz-progresspct-size: 13px; /* progress percentage badge (top right) */
  --jd-text-quiz-progresspct-weight: 600;
  --jd-text-quiz-qlabel-size: 11px; /* "Q1 of 4" label above each question */
  --jd-text-quiz-qlabel-weight: 700;
  --jd-text-quiz-question-weight: 600; /* the question text itself (size = --jd-font-size-body above) */
  --jd-text-quiz-optionletter-size: 12px; /* the A/B/C/D circle on each answer */
  --jd-text-quiz-optionletter-weight: 700;
  --jd-text-quiz-optiontext-size: 15px; /* the answer option text */
  --jd-text-quiz-optiontext-weight: 400; /* ...when NOT selected */
  --jd-text-quiz-optiontext-weight-selected: 600; /* ...when selected */
  --jd-text-quiz-error-size: 15px; /* "please select an answer" type error */
  --jd-text-quiz-backbtn-size: 15px; /* "Back" button */
  --jd-text-quiz-backbtn-weight: 600;
  --jd-text-quiz-nextbtn-size: 15px; /* "Next" / "Generate My Report" button */
  --jd-text-quiz-nextbtn-weight: 700;

  /* ── ANALYSING SCREEN ── */
  --jd-text-analyzing-step-size: 12px; /* the 5 step labels ("Reviewing your website..." etc.) */

  /* ── REPORT — header bar & hero ── */
  --jd-text-report-headerbrand-size: 13px; /* "Jemmy Digital · Audit Report" in the sticky top bar */
  --jd-text-report-headerbrand-weight: 800;
  --jd-text-report-headerbtn-size: 11px; /* "Save PDF" / "New Audit" buttons */
  --jd-text-report-headerbtn-weight: 600;
  --jd-text-report-eyebrow-size: 9px; /* "Overall Digital Growth Score" / "Priority Focus" small labels */
  --jd-text-report-eyebrow-weight: 700;
  --jd-text-report-companyname-size: 19px; /* the company name shown in the hero */
  --jd-text-report-companyname-weight: 900;
  --jd-text-report-companyurl-size: 11px; /* the website URL under the company name */
  --jd-text-report-presencebadge-size: 11px; /* "Strong/Growing/Needs Attention Digital Presence" badge */
  --jd-text-report-presencebadge-weight: 700;
  --jd-text-report-rankbadge-size: 8px; /* the #1/#2/#3 rank circles in Priority Focus */
  --jd-text-report-rankbadge-weight: 800;
  --jd-text-report-prioname-size: 11px; /* pillar name in the Priority Focus list */
  --jd-text-report-prioscore-size: 9px; /* score badge in the Priority Focus list */
  --jd-text-report-prioscore-weight: 700;

  /* ── REPORT — chart & pillar score boxes ── */
  --jd-text-report-chartaxis-size: 11px; /* pillar names along the bottom of the bar chart */
  --jd-text-report-chartaxis-weight: 600;
  --jd-text-report-chartaxis2-size: 10px; /* the 0/25/50/75/100 numbers up the side of the chart */
  --jd-text-report-tooltip-size: 12px; /* the popup that appears when hovering a bar */
  --jd-text-report-pillarbox-name-size: 13px; /* pillar name in the 4 small boxes below the chart */
  --jd-text-report-pillarbox-name-weight: 600;
  --jd-text-report-pillarbox-score-size: 15px; /* the big score number in those boxes */
  --jd-text-report-pillarbox-score-weight: 800;
  --jd-text-report-pillarbox-level-size: 9px; /* the "Strong/Growing/Needs Attention" word under the score */

  /* ── REPORT — detailed findings, quick wins, roadmap ── */
  --jd-text-report-findingtitle-size: 13px; /* pillar title in "Detailed Findings" */
  --jd-text-report-findingtitle-weight: 700;
  --jd-text-report-findingbadge-size: 9px; /* the score/level badge next to each finding */
  --jd-text-report-findingbadge-weight: 700;
  --jd-text-report-quickwinnum-size: 11px; /* the numbered circle (1, 2, 3) on each Quick Win */
  --jd-text-report-quickwinnum-weight: 800;
  --jd-text-report-roadmapphase-size: 9px; /* "Days 1-30" etc. phase titles */
  --jd-text-report-roadmapphase-weight: 800;
  --jd-text-report-roadmapaction-size: 14px; /* each action line within a roadmap phase */

  /* ── REPORT — closing call-to-action ── */
  --jd-text-report-ctaheading-size: 17px; /* "Ready to Turn These Insights Into Results?" */
  --jd-text-report-ctaheading-weight: 800;
  --jd-text-report-ctabutton-size: 14px; /* "Book My FREE Strategy Call" WhatsApp button */
  --jd-text-report-ctabutton-weight: 800;
  --jd-text-report-ctafineprint-size: 11px; /* "Free · No obligation · Zoom or in-person..." */

  /* ── ADMIN — login screen ── */
  --jd-text-adminlogin-heading-size: 17px; /* "Eric's Dashboard" heading */
  --jd-text-adminlogin-heading-weight: 800;
  --jd-text-adminlogin-subtitle-size: 12px; /* "View all audit submissions..." subtitle */
  --jd-text-adminlogin-input-size: 13px; /* the password input field */
  --jd-text-adminlogin-error-size: 11px; /* "Incorrect password" error */
  --jd-text-adminlogin-button-size: 13px; /* "Sign In" button */
  --jd-text-adminlogin-button-weight: 700;
  --jd-text-adminlogin-backlink-size: 12px; /* "← Back" link */

  /* ── ADMIN — dashboard header & submission cards ── */
  --jd-text-adminheader-title-size: 13px; /* "Eric's Dashboard" in the top bar */
  --jd-text-adminheader-title-weight: 800;
  --jd-text-adminheader-count-size: 10px; /* "X submissions" under the title */
  --jd-text-adminheader-exit-size: 11px; /* "← Exit" button */
  --jd-text-adminheader-exit-weight: 600;
  --jd-text-adminempty-size: 13px; /* "No audits yet..." empty state message */
  --jd-text-admincard-score-size: 13px; /* the score number in each submission's avatar circle */
  --jd-text-admincard-score-weight: 900;
  --jd-text-admincard-name-size: 12px; /* prospect name & company in the card row */
  --jd-text-admincard-name-weight: 700;
  --jd-text-admincard-meta-size: 10px; /* email & date in the card row */
  --jd-text-admincard-badge-size: 9px; /* the priority / digital-presence level badges */
  --jd-text-admincard-badge-weight: 700;

  /* ── ADMIN — expanded submission: contact & pillar tiles ── */
  --jd-text-admindetail-label-size: 8px; /* "MOBILE / EMAIL / WEBSITE" tiny labels */
  --jd-text-admindetail-label-weight: 700;
  --jd-text-admindetail-value-size: 10px; /* the actual mobile/email/website values */
  --jd-text-admindetail-value-weight: 500;
  --jd-text-adminpillar-label-size: 8px; /* pillar short name in the 4 score tiles */
  --jd-text-adminpillar-label-weight: 700;
  --jd-text-adminpillar-score-size: 15px; /* the score number in those tiles */
  --jd-text-adminpillar-score-weight: 800;
  --jd-text-adminpillar-level-size: 8px; /* the level word under the score */

  /* ── ADMIN — expanded submission: prospect report recap ── */
  --jd-text-adminrecap-eyebrow-size: 9px; /* "Executive Summary / Detailed Findings / Quick Wins / 90-Day Roadmap" labels */
  --jd-text-adminrecap-eyebrow-weight: 700;
  --jd-text-adminrecap-body-size: 12px; /* the recapped executive summary text */
  --jd-text-adminrecap-pillartitle-size: 11px; /* pillar title within the findings recap */
  --jd-text-adminrecap-pillartitle-weight: 700;
  --jd-text-adminrecap-pillarbadge-size: 9px; /* score badge within the findings recap */
  --jd-text-adminrecap-pillarbadge-weight: 700;
  --jd-text-adminrecap-winnum-size: 9px; /* numbered circle on each recapped Quick Win */
  --jd-text-adminrecap-winnum-weight: 800;
  --jd-text-adminrecap-roadmapphase-size: 8px; /* phase title within the roadmap recap */
  --jd-text-adminrecap-roadmapphase-weight: 800;
  --jd-text-adminrecap-roadmapaction-size: 10px; /* each action line within the roadmap recap */

  /* ── ADMIN — Eric's Consultation Brief (dark card) & WhatsApp button ── */
  --jd-text-ericbrief-heading-size: 10px; /* "🔐 Consultation Brief for Eric" heading */
  --jd-text-ericbrief-heading-weight: 700;
  --jd-text-ericbrief-label-size: 8px; /* "Pain Points / Pitch These Services / Ask These in the Call / Key Sales Angle" labels */
  --jd-text-ericbrief-label-weight: 700;
  --jd-text-ericbrief-body-size: 11px; /* pain points, conversation starters, and sales angle text */
  --jd-text-ericbrief-servicename-size: 10px; /* recommended service name (e.g. "SEO Package") */
  --jd-text-ericbrief-servicename-weight: 700;
  --jd-text-ericbrief-servicereason-size: 10px; /* the reason text under each recommended service */
  --jd-text-adminwa-button-size: 11px; /* "📱 WhatsApp [Name]" button */
  --jd-text-adminwa-button-weight: 700;

  /* ── PRIVACY POLICY PAGE ── */
  --jd-text-privacy-backbtn-size: 13px; /* "← Back" button in the top bar */
  --jd-text-privacy-backbtn-weight: 600;
  --jd-text-privacy-brandlabel-size: 13px; /* "Jemmy Digital" label in the top bar */
  --jd-text-privacy-brandlabel-weight: 800;
  --jd-text-privacy-subtitle-size: 12px; /* "Personal Data Protection Notice..." subtitle under the title */
  --jd-text-privacy-contactlabel-weight: 700; /* "Jemmy Digital — Data Protection Contact" label weight */

}

/* ── 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);
}