:root {
  /* yellows & oranges */
  --banana-yellow: #fff59d;
  --sunshine-yellow: #ffe082;
  --golden-yellow: #ffd54f;
  --honey-yellow: #ffca28;
  --bright-gold: #ffc107;
  --orange-glow: #ffb300;
  --sunset-orange: #ffa000;
  --deep-orange: #ff8f00;

  /* reds & pinks */
  --peach-pink: #ff8a80;
  --tomato-red: #ff5252;
  --bubblegum-pink: #ff4081;
  --soft-pink: #f48fb1;
  --candy-pink: #f06292;
  --hot-pink: #ec407a;
  --cherry-red: #e91e63;
  --raspberry-red: #f50057;

  /* purples */
  --lavender-light: #ea80fc;
  --lavender: #e1bee7;
  --violet: #ce93d8;
  --bright-violet: #ba68c8;
  --grape-purple: #ab47bc;
  --royal-purple: #9c27b0;
  --deep-purple: #8e24aa;
  --midnight-purple: #7b1fa2;

  /* blues */
  --sky-blue: #82b1ff;
  --bright-blue: #64b5f6;
  --clear-blue: #42a5f5;
  --ocean-blue: #2196f3;
  --deep-blue: #1e88e5;
  --royal-blue: #1976d2;
  --navy-blue: #1565c0;
  --midnight-blue: #0d47a1;

  /* teals & cyans */
  --aqua-light: #84ffff;
  --aqua-bright: #18ffff;
  --bright-cyan: #00e5ff;
  --tropical-blue: #00bcd4;
  --seafoam: #26c6da;
  --teal: #4dd0e1;
  --soft-teal: #80deea;
  --ice-blue: #b2ebf2;

  /* greens & limes */
  --mint-green: #b9f6ca;
  --bright-green: #69f0ae;
  --grass-green: #00e676;
  --leaf-green: #66bb6a;
  --soft-green: #81c784;
  --lime-green: #aed581;
  --light-lime: #dce775;
  --pale-lime: #d4e157;

  /* golds & neutrals */
  --pale-gold: #fff59b;
  --warm-gold: #fff176;
  --butter-cream: #fff9c4;
  --pale-olive: #f0f4c3;
  --sage-green: #dcedc8;
  --minty-white: #c8e6c9;
  --soft-peach: #ffe0b2;
  --warm-peach: #ffcc80;

  /* greys & creams */
  --light-grey: #fafafa;
  --soft-grey: #f5f5f5;
  --cream-white: #fffbea;
  --soft-cream: #fff3e0;
  --light-cream: #fff8e1;
  --pale-yellow: #fffde7;
  --pale-blue: #e0f7fa;
  --pale-green: #f1f8e9;
}

/* yellows & oranges */

[data-color="banana-yellow"] {
  --card-color: var(--banana-yellow);
}

[data-color="sunshine-yellow"] {
  --card-color: var(--sunshine-yellow);
}

[data-color="golden-yellow"] {
  --card-color: var(--golden-yellow);
}

[data-color="honey-yellow"] {
  --card-color: var(--honey-yellow);
}

[data-color="bright-gold"] {
  --card-color: var(--bright-gold);
}

[data-color="orange-glow"] {
  --card-color: var(--orange-glow);
}

[data-color="sunset-orange"] {
  --card-color: var(--sunset-orange);
}

[data-color="deep-orange"] {
  --card-color: var(--deep-orange);
}

/* reds & pinks */

[data-color="peach-pink"] {
  --card-color: var(--peach-pink);
}

[data-color="tomato-red"] {
  --card-color: var(--tomato-red);
}

[data-color="bubblegum-pink"] {
  --card-color: var(--bubblegum-pink);
}

[data-color="soft-pink"] {
  --card-color: var(--soft-pink);
}

[data-color="candy-pink"] {
  --card-color: var(--candy-pink);
}

[data-color="hot-pink"] {
  --card-color: var(--hot-pink);
}

[data-color="cherry-red"] {
  --card-color: var(--cherry-red);
}

[data-color="raspberry-red"] {
  --card-color: var(--raspberry-red);
}

/* purples */

[data-color="lavender-light"] {
  --card-color: var(--lavender-light);
}

[data-color="lavender"] {
  --card-color: var(--lavender);
}

[data-color="violet"] {
  --card-color: var(--violet);
}

[data-color="bright-violet"] {
  --card-color: var(--bright-violet);
}

[data-color="grape-purple"] {
  --card-color: var(--grape-purple);
}

[data-color="royal-purple"] {
  --card-color: var(--royal-purple);
}

[data-color="deep-purple"] {
  --card-color: var(--deep-purple);
}

[data-color="midnight-purple"] {
  --card-color: var(--midnight-purple);
}

/* blues */

[data-color="sky-blue"] {
  --card-color: var(--sky-blue);
}

[data-color="bright-blue"] {
  --card-color: var(--bright-blue);
}

[data-color="clear-blue"] {
  --card-color: var(--clear-blue);
}

[data-color="ocean-blue"] {
  --card-color: var(--ocean-blue);
}

[data-color="deep-blue"] {
  --card-color: var(--deep-blue);
}

[data-color="royal-blue"] {
  --card-color: var(--royal-blue);
}

[data-color="navy-blue"] {
  --card-color: var(--navy-blue);
}

[data-color="midnight-blue"] {
  --card-color: var(--midnight-blue);
}

/* teals & cyans */

[data-color="aqua-light"] {
  --card-color: var(--aqua-light);
}

[data-color="aqua-bright"] {
  --card-color: var(--aqua-bright);
}

[data-color="bright-cyan"] {
  --card-color: var(--bright-cyan);
}

[data-color="tropical-blue"] {
  --card-color: var(--tropical-blue);
}

[data-color="seafoam"] {
  --card-color: var(--seafoam);
}

[data-color="teal"] {
  --card-color: var(--teal);
}

[data-color="soft-teal"] {
  --card-color: var(--soft-teal);
}

[data-color="ice-blue"] {
  --card-color: var(--ice-blue);
}

/* greens & limes */

[data-color="mint-green"] {
  --card-color: var(--mint-green);
}

[data-color="bright-green"] {
  --card-color: var(--bright-green);
}

[data-color="grass-green"] {
  --card-color: var(--grass-green);
}

[data-color="leaf-green"] {
  --card-color: var(--leaf-green);
}

[data-color="soft-green"] {
  --card-color: var(--soft-green);
}

[data-color="lime-green"] {
  --card-color: var(--lime-green);
}

[data-color="light-lime"] {
  --card-color: var(--light-lime);
}

[data-color="pale-lime"] {
  --card-color: var(--pale-lime);
}

/* golds & neutrals */

[data-color="pale-gold"] {
  --card-color: var(--pale-gold);
}

[data-color="warm-gold"] {
  --card-color: var(--warm-gold);
}

[data-color="butter-cream"] {
  --card-color: var(--butter-cream);
}

[data-color="pale-olive"] {
  --card-color: var(--pale-olive);
}

[data-color="sage-green"] {
  --card-color: var(--sage-green);
}

[data-color="minty-white"] {
  --card-color: var(--minty-white);
}

[data-color="soft-peach"] {
  --card-color: var(--soft-peach);
}

[data-color="warm-peach"] {
  --card-color: var(--warm-peach);
}

/* greys & creams */

[data-color="light-grey"] {
  --card-color: var(--light-grey);
}

[data-color="soft-grey"] {
  --card-color: var(--soft-grey);
}

[data-color="cream-white"] {
  --card-color: var(--cream-white);
}

[data-color="soft-cream"] {
  --card-color: var(--soft-cream);
}

[data-color="light-cream"] {
  --card-color: var(--light-cream);
}

[data-color="pale-yellow"] {
  --card-color: var(--pale-yellow);
}

[data-color="pale-blue"] {
  --card-color: var(--pale-blue);
}

[data-color="pale-green"] {
  --card-color: var(--pale-green);
}