.elementor-kit-50{--e-global-color-primary:#1E1A14;--e-global-color-secondary:#A66B25;--e-global-color-text:#4A4338;--e-global-color-accent:#D9A55B;--e-global-color-7c6f88c:#FBF7F0;--e-global-color-9b40ad9:#7C6F5A;--e-global-color-e2a6d7e:#E6DDCD;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Playfair Display SC";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;--e-global-typography-6c2465e-font-family:"Playfair Display";--e-global-typography-6c2465e-font-size:32px;--e-global-typography-6c2465e-font-weight:700;--e-global-typography-6c2465e-line-height:1.1em;--e-global-typography-6c2465e-letter-spacing:0.01em;--e-global-typography-21d72e3-font-family:"Playfair Display";--e-global-typography-21d72e3-font-size:24px;--e-global-typography-21d72e3-font-weight:700;--e-global-typography-21d72e3-line-height:1.2em;--e-global-typography-663be92-font-family:"Inter";--e-global-typography-663be92-font-size:18px;--e-global-typography-663be92-font-weight:400;--e-global-typography-663be92-line-height:1.6em;--e-global-typography-db0a03a-font-family:"Inter";--e-global-typography-db0a03a-font-size:14px;--e-global-typography-db0a03a-font-weight:600;--e-global-typography-db0a03a-letter-spacing:0.04em;--e-global-typography-3d6e4da-font-family:"Inter";--e-global-typography-3d6e4da-font-size:10px;--e-global-typography-3d6e4da-font-weight:700;--e-global-typography-3d6e4da-text-transform:uppercase;--e-global-typography-3d6e4da-letter-spacing:0.14em;}.elementor-kit-50 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   AFRIQUE FOLK — DESIGN TOKENS
   Single source of truth. Paste into the child theme style.css (preferred)
   or Elementor → Site Settings → Custom CSS.
   Everything else (Global Colours, Global Fonts, Theme Style) mirrors these.
   ========================================================================== */

:root{
  /* --- Brand --- */
  --af-gold-1:#D9A55B;                 /* amber  */
  --af-gold-2:#A66B25;                 /* ochre  */
  --af-gradient:linear-gradient(135deg, var(--af-gold-1) 0%, var(--af-gold-2) 100%);

  /* --- Surface & ink --- */
  --af-cream:#FBF7F0;                  /* page surface  */
  --af-ink:#1E1A14;                    /* headlines / body */
  --af-ink-soft:#4a4338;               /* secondary text */
  --af-muted:#7c6f5a;                  /* meta / captions */
  --af-line:#e6ddcd;                   /* hairlines / borders */

  /* --- Shape lock (documented multi-radius rule) --- */
  --af-radius-pill:4px;                /* category pills, small tags */
  --af-radius-card:8px;                /* cards, images, inputs' container */
  --af-radius-input:6px;               /* form fields */

  /* --- Type scale (reference; sizing is driven by Elementor Global Fonts) --- */
  --af-h1:32px;
  --af-h2:24px;
  --af-b1:18px;
  --af-b2:14px;
  --af-caption:10px;
}

/* ==========================================================================
   GRADIENT UTILITIES
   These exist in CSS (not Global Colours) because Elementor globals are
   solid-only. Apply by adding the class in a widget's Advanced > CSS Classes.
   ========================================================================== */

.af-pill{
  display:inline-block;
  font:700 var(--af-caption)/1 "Inter", system-ui, sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:var(--af-gradient);
  padding:5px 12px;
  border-radius:var(--af-radius-pill);
}

.af-btn{
  background:var(--af-gradient);
  color:#fff;
  border:0;
  border-radius:var(--af-radius-pill);
  transition:transform .2s ease, filter .2s ease;
}
.af-btn:hover{ filter:brightness(1.05); }
.af-btn:active{ transform:translateY(1px); }

/* Ghost variant for dark sections (e.g. 404 secondary action) */
.af-btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
}

/* ==========================================================================
   TOKEN-LEVEL BASELINE
   Site-wide behaviours that belong to the tokens, not to any one component.
   ========================================================================== */

/* Brand text selection */
::selection{ background:var(--af-gold-1); color:var(--af-ink); }

/* Visible, on-brand keyboard focus (QA: focus ring is non-negotiable) */
:focus-visible{
  outline:2px solid var(--af-gold-2);
  outline-offset:2px;
}

/* Link hover within editorial body content */
.entry-content a:hover,
.elementor-widget-theme-post-content a:hover{
  color:var(--af-gold-2);
}

/* Reduced-motion guard for any token-driven transitions */
@media (prefers-reduced-motion: reduce){
  .af-btn{ transition:none; }
}/* End custom CSS */