/* ----------------------------------------------------------------------------------------
* Richy Care and Recruitment Limited — Brand Theme Override
* Loads AFTER custom.css. Overrides root variables only — no new selectors, no layout changes.
*
* Brand palette:
*   Green (primary logo leaf/heart) : #419443
*   Light green (tint)              : #d2f6d4
*   Neutral gray                    : #e9e9e9
*   Light blue (tint)               : #d9e1f9
*   Deep blue (primary logo hands/wordmark) : #20409a
*
* HOW TO USE:
*   Exactly ONE ":root" block below should be un-commented at a time.
*   Variation 1 is active by default. To switch, comment out the active block
*   and un-comment the desired variation instead. Do not run two at once —
*   the later block in the cascade will simply win, but keep it clean.
* ---------------------------------------------------------------------------------------- */
/* ============================================================
   VARIATION 1 (ACTIVE): Blue-Primary / Green-Accent
   Blue carries the structural weight (nav, footer, headings, buttons),
   matching the wordmark's dominant color. Green is reserved for accents,
   links, and hover states. Reads corporate, trustworthy, stable.
   ============================================================ */
:root {
	--primary-color: #20409a;
	--primary-color-rgb: 32, 64, 154;
	--secondary-color: #FFFFFF;
	--bg-color: #f8f9fc;
	--text-color: #333333;
	--accent-color: #419443;
	--white-color: #FFFFFF;
	--divider-color: #20409a1A;
	--dark-divider-color: #FFFFFF1A;
	--error-color: rgb(230, 87, 87);
}

/* ============================================================
   VARIATION 2: Green-Primary / Blue-Accent
   Inverts the emphasis — green leads (health/care/growth feel),
   blue becomes the highlight/accent color. May suit an elderly-care
   brand's warmth better than an all-blue "corporate" look.
   ============================================================ */

/* :root {
  --primary-color        : #419443;
  --primary-color-rgb    : 65, 148, 67;
  --secondary-color       : #FFFFFF;
  --bg-color              : #FFFFFF;
  --text-color            : #2b2b2b;
  --accent-color          : #20409a;
  --white-color           : #FFFFFF;
  --divider-color         : #4194431A;
  --dark-divider-color    : #FFFFFF1A;
  --error-color           : rgb(230, 87, 87);
} */



/* ============================================================
   VARIATION 3: Split / Balanced
   Blue handles structural chrome (nav/footer/headings), green handles
   interactive elements (buttons/links/hover) in more equal measure —
   neither color visually dominates the page.
   ============================================================ */
/*
:root {
  --primary-color        : #20409a;
  --primary-color-rgb    : 32, 64, 154;
  --secondary-color       : #FFFFFF;
  --bg-color              : #FFFFFF;
  --text-color            : #2b2b2b;
  --accent-color          : #419443;
  --white-color           : #FFFFFF;
  --divider-color         : #e9e9e9;
  --dark-divider-color    : #FFFFFF1A;
  --error-color           : rgb(230, 87, 87);

  Notes for the agent: if the template exposes separate button/link
  variables beyond --accent-color (grep for --btn-color, --link-color,
  etc. in custom.css), point those specifically at #419443 while keeping
  --primary-color at #20409a for nav/footer/headings only. This is what
  differentiates "Split/Balanced" from Variation 1 in practice.
}
*/


/* ============================================================
   VARIATION 4: Soft / Tinted
   Uses the light blue and light green tints as background washes
   (section backgrounds, cards) rather than leaving whitespace plain
   white/gray. Full-saturation colors reserved for text, icons, buttons.
   Gives more brand presence in the negative space of the page.
   ============================================================ */
/*
:root {
  --primary-color        : #20409a;
  --primary-color-rgb    : 32, 64, 154;
  --secondary-color       : #FFFFFF;
  --bg-color              : #d9e1f9;
  --text-color            : #2b2b2b;
  --accent-color          : #419443;
  --white-color           : #FFFFFF;
  --divider-color         : #20409a1A;
  --dark-divider-color    : #FFFFFF1A;
  --error-color           : rgb(230, 87, 87);

  New utility tints (not part of the original template's variable set —
  only add these if the agent's hardcoded-color audit finds section
  backgrounds or cards worth tinting; do not force them in otherwise):
  --accent-bg-color       : #d2f6d4;
  --primary-bg-color      : #d9e1f9;
}
*/

/* Overrides for hardcoded rgba values of original primary color */
/* The primary color uses --primary-color-rgb for dynamic alpha */

.hero::before {
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.80) 0%, rgba(var(--primary-color-rgb), 0.19) 11.75%), linear-gradient(270deg, rgba(var(--primary-color-rgb), 0.00) 31.93%, rgba(var(--primary-color-rgb), 0.90) 100%);
}

.book-appointment::before {
    background: linear-gradient(0deg, rgba(var(--primary-color-rgb), 0.70) 0%, rgba(var(--primary-color-rgb), 0.70) 100%);
}

.page-header:before {
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.80) 0%, transparent 11.75%), linear-gradient(270deg, transparent 31.93%, rgba(var(--primary-color-rgb), 0.90) 100%);
}

.hero-royal::before {
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.20) 0%, transparent 50%, rgba(var(--primary-color-rgb), 0.90) 95%);
}

.what-we-video-image-royal figure::before {
    background: linear-gradient(180deg, transparent 50.13%, rgba(var(--primary-color-rgb), 0.80) 100%);
}

.service-item-image-prime figure::before {
    background: linear-gradient(180deg, transparent 30%, rgba(var(--primary-color-rgb), 0.90) 95%);
}

.benefit-info-box-image-prime figure:before {
    background: linear-gradient(270deg, transparent 31.36%, rgba(var(--primary-color-rgb), 0.90) 78.4%);
}

.feature-image-prime figure:before {
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.00) 40.31%, var(--primary-color) 91.05%);
}