/*
  Client Theme: Novaré Injury Care
  Slug: hello-elementor-child-novare

  Brand token overrides for sp-base.css. Loads AFTER sp-base.css.

  These tokens must stay in sync with novare-styles.css (homepage + lp-*
  pages) and brand/tokens.css. Any sp-* page shipped via the render skill
  inherits its color, typography, and spacing from this file — so a drift
  here = drift across every sp-* rendered page.

  Source of truth for brand: Clients/novareinjurycare.com/brand/tokens.json
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ===== Brand colors ===== */
  /* Primary = Novaré navy (deep medical blue) */
  --color-primary: #0c1a2e;
  --color-primary-hover: #18293f;

  /* Secondary = brand cyan, WCAG-AA darkened from #41BEEA to #0C7396 (4.57:1 on white) */
  --color-secondary: #0C7396;
  --color-secondary-hover: #07597A;

  /* Accent = same cyan as secondary; kept as a separate token for clarity in components */
  --color-accent: #0C7396;
  --color-accent-hover: #07597A;

  /* Backgrounds */
  --color-bg: #ffffff;
  --color-bg-alt: #edf5fa;        /* light cyan-tinted surface */
  --color-bg-light: #f5f9fc;      /* even lighter tint */
  --color-bg-dark: #0c1a2e;       /* navy — used for dark sections */

  /* Text */
  --color-text: #444444;
  /* Darkened from #6b7785 to #595959 for WCAG AA on --color-bg-alt (#edf5fa). */
  --color-text-light: #595959;
  --color-text-muted: #595959;
  --color-text-on-dark: #ffffff;
  --color-heading: #1a1a1a;

  /* Borders */
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  /* Links */
  --color-link: #0C7396;
  --color-link-hover: #07597A;

  /* ===== Typography ===== */
  --font-heading: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.65;
  --line-height-heading: 1.15;

  /* ===== Buttons ===== */
  --btn-padding: 18px 28px;
  --btn-font-size: 16px;
  --btn-font-weight: 600;
  --btn-radius: 10px;

  /* ===== Spacing / layout ===== */
  --gap-sm: 14px;
  --gap-md: 24px;
  --gap-lg: 48px;
  --section-padding: clamp(64px, 9vw, 120px);
  --section-padding-mobile: 64px;
  --page-max-width: 1240px;
  --content-max-width: 820px;

  /* ===== Radii ===== */
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 2px 8px rgba(12,26,46,0.06);
  --shadow-md: 0 8px 28px rgba(12,26,46,0.10);
}

/* ===== Button variant tweaks that sp-base.css can't express cleanly ===== */

/* Primary button = brand cyan bg + white text (matches btn--cyan on lp-* pages) */
.sp-btn--primary {
  background-color: var(--color-secondary);
  color: #ffffff;
  border-color: var(--color-secondary);
}
.sp-btn--primary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: #ffffff;
}

/* Outline-on-light button = cyan text + cyan border on white (matches btn--outline on lp-* pages) */
.sp-btn--on-light {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-color: transparent;
}
.sp-btn--on-light:hover {
  background-color: var(--color-secondary);
  color: #ffffff;
  border-color: var(--color-secondary);
}

/* Headings — force brand fonts across every rendered page */
.sp-page h1,
.sp-page h2,
.sp-page h3,
.sp-page h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

/* Links inside content inherit cyan-dark */
.sp-page a {
  color: var(--color-link);
}
.sp-page a:hover {
  color: var(--color-link-hover);
}