$stanfordColors:
        'cardinal', 'palo-alto', 'palo-verde', 'olive', 'bay', 'sky', 'lagunita', 'poppy',
        'spirited', 'illuminating', 'plum', 'brick', 'archway', 'stone', 'fog',
        'digital-red', 'digital-blue', 'digital-green';

$stanfordBaseColors:
  'white', 'black',
  'black-10','black-20','black-30','black-40','black-50','black-60','black-70','black-80','black-90','black-100',
  'grey';

:root,
:root:lang(en) {

  --last-updated: '2/24/22';
  // Primary Colors
  --su-cardinal: #8C1515;
  --su-cardinal-light: #B83A4B;
  --su-cardinal-dark:  #820000;

  --su-white: #ffffff;
  --su-black: #2e2d29;
  --su-black-100: var(--su-black);
  --su-black-90: #43423E;
  --su-black-80: #585754;
  --su-black-70: #6D6C69;
  --su-black-60: #767674;
  --su-black-50: #979694;
  --su-black-40: #ABABA9;
  --su-black-30: #C0C0BF;
  --su-black-20: #D5D5D4;
  --su-black-10: #EAEAEA;
  --su-grey: #53565a;

  // Accent Colors
  // -------------

  // Palo Alto
  --su-palo-alto: #175E54;
  --su-palo-alto-light: #2D716F;
  --su-palo-alto-dark: #014240;

  // Palo Verde
  --su-palo-verde: #279989;
  --su-palo-verde-light: #59B3A9;
  --su-palo-verde-dark: #017E7C;

  // Olive
  --su-olive: #8F993E;
  --su-olive-light: #A6B168;
  --su-olive-dark: #7A863B;

  // Bay
  --su-bay: #6FA287;
  --su-bay-light: #8AB8A7;
  --su-bay-dark: #417865;

  // Sky
  --su-sky: #4298B5;
  --su-sky-light:#67AFD2;
  --su-sky-dark:#016895;

  // Lagunita
  --su-lagunita: #007C92;
  --su-lagunita-light: #009AB4;
  --su-lagunita-dark: #006B81;

  // Poppy
  --su-poppy: #E98300;
  --su-poppy-light: #F9A44A;
  --su-poppy-dark: #D1660F;

  // Spirited
  --su-spirited: #E04F39;
  --su-spirited-light: #F4795B;
  --su-spirited-dark: #C74632;

  // Illuminating
  --su-illuminating: #FEDD5C;
  --su-illuminating-light: #FFE781;
  --su-illuminating-dark: #FEC51D;

  // Plum
  --su-plum: #620059;
  --su-plum-light: #734675;
  --su-plum-dark: #350D36;

  // Brick
  --su-brick: #651C32;
  --su-brick-light: #7F2D48;
  --su-brick-dark: #42081B;

  // Archway
  --su-archway: #5D4B3C;
  --su-archway-light: #766253;
  --su-archway-dark: #2F2424;

  // Stone
  --su-stone: #7F7776;
  --su-stone-light: #D4D1D1;
  --su-stone-dark: #544948;

  // Fog
  --su-fog: #DAD7CB;
  --su-fog-light: #F4F4F4;
  --su-fog-dark: #B6B1A9;

  /* Web Interactive Colors
  *************************/
  // Digital Red
  --su-digital-red: #b1040e;
  --su-digital-red-light: #e50808;
  --su-digital-red-dark: #820000;

  // Digital Blue
  --su-digital-blue: #006cb8;
  --su-digital-blue-light: #6fc3ff;
  --su-digital-blue-dark: #00548f;

  // Digital Green
  --su-digital-green: #008556;
  --su-digital-green-light: #1aecba;
  --su-digital-green-dark: #006f54;
}

@mixin suColor($color, $useVariant: true) {
  $variants: '', '-dark', '-light';
  @each $variant in $variants {
      $currentVariant: if($useVariant, #{$variant}, '');
      .su-bg-#{$color}#{$currentVariant} {
        background-color: var(--su-#{$color}#{$currentVariant});
      }
      .su-text-#{$color}#{$currentVariant} {
        color: var(--su-#{$color}#{$currentVariant});
    }
  }
}

@each $stanfordBaseColor in $stanfordBaseColors {
  @include suColor($stanfordBaseColor, false);
}

@each $stanfordColor in $stanfordColors {
  @include suColor($stanfordColor);
}
