/* 🛑 STOP!
  Do not change this file directly.
  Modify colors in color-tokens.js
 */

$color-surface: #f5f2f7 !default;
$color-on-surface: #29344B !default;
$color-red: #FCD4D2 !default;
$color-on-red: #885452 !default;
$color-yellow: #F2E6B1 !default;
$color-on-yellow: #71673C !default;
$color-blue: #CADFF9 !default;
$color-on-blue: #4B6381 !default;
$color-green: #c6e7d6 !default;
$color-on-green: #4C695A !default;
$color-purple: #E0D4F6 !default;
$color-on-purple: #675883 !default;

$base-color-tokens: ("surface", "red", "yellow", "blue", "green", "purple");

$color-tokens: (
  "color-surface": $color-surface,
  "color-on-surface": $color-on-surface,
  "color-red": $color-red,
  "color-on-red": $color-on-red,
  "color-yellow": $color-yellow,
  "color-on-yellow": $color-on-yellow,
  "color-blue": $color-blue,
  "color-on-blue": $color-on-blue,
  "color-green": $color-green,
  "color-on-green": $color-on-green,
  "color-purple": $color-purple,
  "color-on-purple": $color-on-purple
) !default;

:root {
  --color-surface: #{$color-surface};
  --color-on-surface: #{$color-on-surface};
  --color-red: #{$color-red};
  --color-on-red: #{$color-on-red};
  --color-yellow: #{$color-yellow};
  --color-on-yellow: #{$color-on-yellow};
  --color-blue: #{$color-blue};
  --color-on-blue: #{$color-on-blue};
  --color-green: #{$color-green};
  --color-on-green: #{$color-on-green};
  --color-purple: #{$color-purple};
  --color-on-purple: #{$color-on-purple};
}