/* ============================================================================
   Apexis Learn — Color Library
   Brand-matched to apexisglobal.com (derived from its Elementor/Astra global
   palette). Green-primary, gold-secondary, lime + red accents, slate neutrals.
   Generated 2026-06-08.
   ========================================================================== */
:root {
  /* ---- Brand core (semantic) ---------------------------------------------- */
  --al-primary:         #30852A;  /* apexisglobal primary green            */
  --al-primary-dark:    #154922;  /* deep forest green (dark sections)     */
  --al-primary-bright:  #6DC920;  /* lime accent / highlights              */
  --al-secondary:       #FFC806;  /* gold (secondary CTAs)                 */
  --al-secondary-light: #FFDE43;  /* yellow                                */
  --al-danger:          #CF2D22;  /* red (alerts / accent)                 */
  --al-danger-dark:     #991313;

  /* ---- Text & surface ----------------------------------------------------- */
  --al-ink:        #1E293B;  /* headings                                    */
  --al-body:       #334155;  /* body copy                                   */
  --al-muted:      #64748B;  /* secondary text                              */
  --al-faint:      #9CA3AF;  /* placeholders / disabled                     */
  --al-border:     #D1D5DB;
  --al-surface:        #FFFFFF;
  --al-surface-alt:    #F0F5FA;  /* light section background                */
  --al-surface-sunken: #FBFBFB;

  /* ---- Green ramp (primary family) ---------------------------------------- */
  --al-green-50:  #EAF3E9;
  --al-green-100: #CDE3CA;
  --al-green-200: #A7CDA1;
  --al-green-300: #6FAE66;
  --al-green-400: #459A3A;
  --al-green-500: #30852A;  /* = primary */
  --al-green-600: #277021;
  --al-green-700: #1F5C1B;
  --al-green-800: #154922;  /* = forest  */
  --al-green-900: #0E3217;

  /* ---- Lime accent ramp --------------------------------------------------- */
  --al-lime-300: #A6E36A;
  --al-lime-400: #87D640;
  --al-lime-500: #6DC920;  /* = primary-bright */
  --al-lime-600: #57A317;

  /* ---- Gold ramp (secondary family) --------------------------------------- */
  --al-gold-50:  #FFF8E0;
  --al-gold-100: #FFEFB3;
  --al-gold-200: #FFE684;
  --al-gold-300: #FFDE43;  /* = secondary-light */
  --al-gold-400: #FFD11F;
  --al-gold-500: #FFC806;  /* = secondary */
  --al-gold-600: #E0A800;
  --al-gold-700: #B38400;
  --al-gold-800: #856100;
  --al-gold-900: #5C4200;

  /* ---- Red ramp (accent / status) ----------------------------------------- */
  --al-red-50:  #FBE9E8;
  --al-red-100: #F4C5C2;
  --al-red-300: #E06B63;
  --al-red-500: #CF2D22;  /* = danger */
  --al-red-700: #991313;  /* = danger-dark */

  /* ---- Slate neutral ramp ------------------------------------------------- */
  --al-slate-50:  #F0F5FA;
  --al-slate-100: #E2E8F0;
  --al-slate-200: #D1D5DB;
  --al-slate-300: #9CA3AF;
  --al-slate-400: #64748B;
  --al-slate-500: #475569;
  --al-slate-600: #334155;
  --al-slate-700: #1E293B;
  --al-slate-800: #111111;
  --al-slate-900: #000000;
}

/* ---- Mapping to Elementor global slots (for reference / parity) -----------
   primary   = var(--al-primary)        #30852A
   secondary = var(--al-secondary)      #FFC806
   accent    = var(--al-primary-bright) #6DC920
   text      = var(--al-slate-800)      #111111
   --------------------------------------------------------------------------- */