:root, .light {
  /*-- GENERAL COLOURS --*/
  --primaryDark: #1C0C00;
  --primary: #C6F96E;
  --primaryLight: #B5F2F7;
  --cta: #FE6A41;
  --blue: #0654FF;
  --navy: #005796;
  --yellow: #FFFF99;
  --peach: #F9AE94;
  --cream: #FFF0D8;
  --purple: #DCA4FC;
  --pink: #FF8EC3;
  --brown: #553723;
  --red: #981B1E;
  --lightPurple: #F3DFFF;
  --bgColor: #FEF9F2;
  --fontColor: #111;
  --headingColor: #000;
  --opacityColor:  28,12,0;
  --overlayRGB: 255,255,255;
  --opacityColor2:  85,55,35;
  --overlayRGB2: 255,255,153;
  --radIt: 30px;
  --spaced: 2rem;

  /*-- GENERAL VARIABLES --*/
  --transition: all 0.3s ease;
  --borderRadius: 8px;
  --inputPadding: .7em;
  --gridSpacing: 1rem;
  --containerWidth: 1260px;
  --bodyFont: "Bryant Regular", BlinkMacSystemFont, "-apple-system", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --headingFont: "Bryant Bold", BlinkMacSystemFont, "-apple-system", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --headingWeight: 700;
  --buttonBorderWidth: 1px;
  --buttonBorderRadius: 2em;

  /*-- FOOTER VARIABLES --*/
  --footerColor: #222222;
  --footerBG: #fff;
  
  /*-- FORM VARIABLES --*/
  --formColor: var(--fontColor);
  --formBG: var(--white);
  --inputColor: var(--black);
  --inputBG: var(--white);

  /*-- CARD VARIABLES --*/
  --cardBG: #fff;
  --cardTextColor: var(--fontColor);
  --cardBorder: 0px solid rgba(var(--opacityColor), 0.1);
  --cardShadow: 0 10px 10px -5px var(--opacity20);
  --cardBGHover: #fff;
  --cardShadowHover: 0 10px 20px -5px var(--opacity40);
  --cardTransformHover: translatey(-.4em);
  --cardHeadingFont: inherit;
  --cardHeadingWeight: var(--headingWeight);
  --cardHeadingColor: var(--headingColor);

  /*-- ADVANCED VARIABLES --*/
  --opacity100: rgba(var(--opacityColor), 1);
  --opacity90: rgba(var(--opacityColor), .9);
  --opacity80: rgba(var(--opacityColor), .8);
  --opacity70: rgba(var(--opacityColor), .7);
  --opacity60: rgba(var(--opacityColor), .6);
  --opacity50: rgba(var(--opacityColor), .5);
  --opacity40: rgba(var(--opacityColor), .4);
  --opacity30: rgba(var(--opacityColor), .3);
  --opacity20: rgba(var(--opacityColor), .2);
  --opacity10: rgba(var(--opacityColor), .1);
  --opacity05: rgba(var(--opacityColor), .05);
  --opacity03: rgba(var(--opacityColor), .03);
  --opacity00: rgba(var(--opacityColor), .00);

  --error: #CF000F;
  --warning: orange;
  --success: #26A65B;
  --white: #fff;
  --black: #000;
}

.dark {
  /*-- GENERAL COLOURS --*/
  --bgColor: #1C0C00;
  --fontColor: #fff;
  --headingColor: #fff;
  --opacityColor: 255,255,255;
  --overlayRGB: 28,12,0;
    --opacityColor2:  255,255,153;
  --overlayRGB2: 85,55,35;
  
  /*-- FORM VARIABLES --*/
  --formColor: var(--white);
  --formBG: rgba(0,0,0,.1);
  --inputColor: var(--white);
  --inputBG: rgba(255,255,255,.1);
}