/*
 * LeadsHQ Design Tokens
 * Source: elementor-kit-5 on leadshq.com.au (canonical Elementor globals)
 * Last synced: 2026-05-13
 *
 * Import or copy into any Claude-built UI to inherit LeadsHQ brand styling.
 */

:root {
  /* Colours */
  --lhq-primary:    #0153FF;  /* Electric blue — CTAs, links, brand mark */
  --lhq-secondary:  #000033;  /* Deep navy — headings, dark sections */
  --lhq-accent:     #FF6600;  /* Orange — highlight / urgency */
  --lhq-text:       #0A071B;  /* Body copy near-black */
  --lhq-surface:    #F5F5F5;  /* Light gray surface */
  --lhq-white:      #FFFFFF;
  --lhq-deep-blue:  #000066;  /* Alt deep blue */

  /* Fonts */
  --lhq-font-heading: "Poppins", system-ui, sans-serif;
  --lhq-font-body:    "Poppins", system-ui, sans-serif;
  --lhq-font-accent:  "Roboto", system-ui, sans-serif;

  /* Weights */
  --lhq-weight-light:  300;
  --lhq-weight-medium: 500;
  --lhq-weight-bold:   700;

  /* Type scale (matches Elementor globals) */
  --lhq-h1-size: 40px;  --lhq-h1-lh: 50px;
  --lhq-h2-size: 30px;  --lhq-h2-lh: 36px;
  --lhq-body-size: 18px; --lhq-body-lh: 26px;
}

/* Google Fonts import (skip if already loaded by host page) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&family=Roboto:wght@500&display=swap');

/* Suggested base styles */
body {
  font-family: var(--lhq-font-body);
  font-size: var(--lhq-body-size);
  line-height: var(--lhq-body-lh);
  font-weight: var(--lhq-weight-light);
  color: var(--lhq-text);
}

h1 {
  font-family: var(--lhq-font-heading);
  font-size: var(--lhq-h1-size);
  line-height: var(--lhq-h1-lh);
  font-weight: var(--lhq-weight-bold);
  color: var(--lhq-secondary);
}

h2 {
  font-family: var(--lhq-font-heading);
  font-size: var(--lhq-h2-size);
  line-height: var(--lhq-h2-lh);
  font-weight: var(--lhq-weight-medium);
  color: var(--lhq-secondary);
}

a { color: var(--lhq-primary); }

.lhq-cta {
  background: var(--lhq-primary);
  color: var(--lhq-white);
  font-family: var(--lhq-font-body);
  font-weight: var(--lhq-weight-bold);
  padding: 14px 28px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
}
.lhq-cta:hover { background: var(--lhq-deep-blue); }