/* ============================================================
   PIXENTRA — Design Tokens
   ────────────────────────────────────────────────────────────
   12 base colours. Everything else is derived via opacity /
   alpha so the CMS only needs to manage these values.

   CMS INTEGRATION:
   Inject a <style> block overriding :root at runtime.
   Changing --color-green-primary updates every hover, active
   state, border, icon, gradient and shadow automatically.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-base: 'Inter', sans-serif;


  /* ----------------------------------------------------------
     BASE PALETTE — 12 colours total
  ---------------------------------------------------------- */

  /* Black / Dark scale */
  --color-black       : #111111;   /* headings, active text, strongest UI   */
  --color-dark        : #252525;   /* hamburger lines, near-black elements  */
  --color-grey-dark   : #444444;   /* body text, nav items, link default    */
  --color-grey-mid    : #777777;   /* secondary text, labels, placeholders  */

  /* White / Light scale */
  --color-grey-light  : #b0b0b0;   /* borders (strong), top-bar separator   */
  --color-white       : #ffffff;   /* surfaces, cards, overlays             */

  /* Brand green scale */
  --color-green-deep  : #145e42;   /* darkest — CTA loading fill, deepest   */
  --color-green-forest: #1a6b3a;   /* forest — CTA text, gradient from      */
  --color-green-primary:#1f8f63;   /* PRIMARY — hover, active, focus ring   */
  --color-green-parrot: #5cd65c;   /* parrot — gradient end, icons, dot     */

  /* Page / structural */
  --color-page-bg     : #f7f7f5;   /* off-white page background             */
  --color-border      : #e3e3e3;   /* base divider / border colour          */


  /* ----------------------------------------------------------
     DERIVED COLOURS — alpha variants of the 12 base colours
     The CMS never touches these; they update automatically.
  ---------------------------------------------------------- */

  /* Text shades — grey-dark at various opacities */
  --clr-text-strong   : var(--color-black);
  --clr-text-body     : var(--color-grey-dark);
  --clr-text-secondary: var(--color-grey-mid);
  --clr-text-muted    : rgba(119, 119, 119, 0.75);   /* grey-mid 75% */
  --clr-text-subtle   : rgba(119, 119, 119, 0.55);   /* grey-mid 55% */
  --clr-text-placeholder: rgba(119, 119, 119, 0.50); /* grey-mid 50% */

  /* Border shades — derived from --color-border */
  --clr-border-strong : var(--color-grey-light);     /* top-bar bottom 2px  */
  --clr-border-default: var(--color-border);         /* shared vdivider     */
  --clr-border-light  : rgba(227, 227, 227, 0.70);   /* softer borders      */
  --clr-border-subtle : rgba(227, 227, 227, 0.50);   /* very soft dividers  */
  --clr-border-grey-50: rgba(176, 176, 176, 0.50);   /* grey-light @ 50% — featured card */
  --clr-faq-wash        : rgba(176, 176, 176, 0.15);   /* grey-light @ 15% — faq item wash */

  /* Surface shades — white at various opacities */
  --clr-surface-full  : var(--color-white);
  --clr-surface-96    : rgba(255, 255, 255, 0.96);   /* footer card / legal */
  --clr-surface-80    : rgba(255, 255, 255, 0.80);   /* newsletter input bg */

  /* Hover backgrounds — primary green very faint */
  --clr-hover-bg-soft : rgba(31, 143, 99, 0.04);    /* subtle hover tint   */
  --clr-hover-bg-mid  : rgba(31, 143, 99, 0.07);    /* mid hover tint      */
  --clr-hover-bg-nav  : rgba(31, 143, 99, 0.05);    /* nav item hover      */

  /* Green tints — for borders and light backgrounds */
  --clr-green-border  : rgba(31, 143, 99, 0.22);    /* CTA pill border     */
  --clr-green-border-focus: rgba(31, 143, 99, 0.25); /* search focus ring  */
  --clr-green-forest-border : rgba(26, 107, 58, 0.25);  /* forest @ 25% — cta ghost btn */
  --clr-green-tint-badge : rgba(31, 143, 99, 0.10); /* badge background    */

  /* Overlay / shadow base */
  --clr-overlay-05    : rgba(0, 0, 0, 0.05);
  --clr-overlay-08    : rgba(0, 0, 0, 0.08);


  /* ----------------------------------------------------------
     GRADIENTS — built entirely from the 12 base colours
  ---------------------------------------------------------- */

  --gradient-brand:
    linear-gradient(
      135deg,
      var(--color-green-forest) 0%,
      var(--color-green-parrot) 100%
    );

  --gradient-brand-cta:
    linear-gradient(
      135deg,
      var(--color-green-forest)  0%,
      var(--color-green-primary) 55%,
      var(--color-green-parrot)  100%
    );

  --gradient-brand-text:
    linear-gradient(
      to right,
      var(--color-green-forest),
      var(--color-green-parrot)
    );

  --gradient-search-default:
    linear-gradient(
      to right,
      transparent                 0%,
      rgba(227, 227, 227, 0.55)  60%,
      rgba(227, 227, 227, 0.80) 100%
    );

  --gradient-search-focus:
    linear-gradient(
      to right,
      transparent                0%,
      rgba(31, 143, 99, 0.06)  60%,
      rgba(31, 143, 99, 0.10) 100%
    );


  /* ----------------------------------------------------------
     SHADOWS — built from base colours
  ---------------------------------------------------------- */

  --shadow-header   : 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card     : 0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-overlay  : 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-cta      : 0 4px 12px rgba(31, 143, 99, 0.14);
  --shadow-cta-hover: 0 6px 18px rgba(31, 143, 99, 0.20);
  --shadow-text     : 0 1px 5px rgba(0, 0, 0, 0.40);   /* white text on image */


  /* ----------------------------------------------------------
     GREETING ICON COLOURS
     These are decorative / informational only — not brand.
     CMS does not need to manage these.
  ---------------------------------------------------------- */
  --clr-icon-sun      : #f5a623;
  --clr-icon-cloud-sun: #e8a000;
  --clr-icon-sunset   : #e8681a;
  --clr-icon-moon     : #5b6fa6;

}