// This file maps all SCSS color variables to CSS custom properties.
// It is compiled to CSS separately from the rest of the app.
// The source variables come from color_transformations.scss and variables.scss

:root {
  --scheme-type: #{schemeType()};
  --primary: #{$primary};
  --secondary: #{$secondary};
  --tertiary: #{$tertiary};
  --quaternary: #{$quaternary};
  --header_background: #{$header_background};
  --header_primary: #{$header_primary};
  --highlight: #{$highlight};
  --danger: #{$danger};
  --success: #{$success};
  --love: #{$love};
  --d-selected: #{$selected};
  --d-hover: #{$hover};

  --always-black-rgb: 0, 0, 0;
  --primary-rgb: #{hexToRGB($primary)};
  --primary-low-rgb: #{hexToRGB($primary-low)};
  --primary-very-low-rgb: #{hexToRGB($primary-very-low)};
  --secondary-rgb: #{hexToRGB($secondary)};
  --header_background-rgb: #{hexToRGB($header_background)};
  --tertiary-rgb: #{hexToRGB($tertiary)};
  --highlight-rgb: #{hexToRGB($highlight)};
  --success-rgb: #{hexToRGB($success)};

  --primary-very-low: #{$primary-very-low};
  --primary-low: #{$primary-low};
  --primary-low-mid: #{$primary-low-mid};
  --primary-medium: #{$primary-medium};
  --primary-high: #{$primary-high};
  --primary-very-high: #{$primary-very-high};

  --primary-50: #{$primary-50};
  --primary-100: #{$primary-100};
  --primary-200: #{$primary-200};
  --primary-300: #{$primary-300};
  --primary-400: #{$primary-400};
  --primary-500: #{$primary-500};
  --primary-600: #{$primary-600};
  --primary-700: #{$primary-700};
  --primary-800: #{$primary-800};
  --primary-900: #{$primary-900};

  --header_primary-low: #{$header_primary-low};
  --header_primary-low-mid: #{$header_primary-low-mid};

  --header_primary-medium: #{$header_primary-medium};
  --header_primary-high: #{$header_primary-high};
  --header_primary-very-high: #{$header_primary-very-high};

  --secondary-low: #{$secondary-low};
  --secondary-medium: #{$secondary-medium};
  --secondary-high: #{$secondary-high};
  --secondary-very-high: #{$secondary-very-high};

  --tertiary-very-low: #{$tertiary-very-low};
  --tertiary-low: #{$tertiary-low};
  --tertiary-medium: #{$tertiary-medium};
  --tertiary-high: #{$tertiary-high};
  --tertiary-hover: #{$tertiary-hover};

  --tertiary-50: #{$tertiary-50};
  --tertiary-100: #{$tertiary-100};
  --tertiary-200: #{$tertiary-200};
  --tertiary-300: #{$tertiary-300};
  --tertiary-400: #{$tertiary-400};
  --tertiary-500: #{$tertiary-500};
  --tertiary-600: #{$tertiary-600};
  --tertiary-700: #{$tertiary-700};
  --tertiary-800: #{$tertiary-800};
  --tertiary-900: #{$tertiary-900};

  --quaternary-low: #{$quaternary-low};

  --highlight-bg: #{$highlight-bg};
  --highlight-low: #{$highlight-low};
  --highlight-medium: #{$highlight-medium};
  --highlight-high: #{$highlight-high};

  --danger-low: #{$danger-low};
  --danger-low-mid: #{$danger-low-mid};
  --danger-medium: #{$danger-medium};
  --danger-hover: #{$danger-hover};

  --success-low: #{$success-low};
  --success-medium: #{$success-medium};
  --success-hover: #{$success-hover};

  --love-low: #{$love-low};
  --wiki: #{$wiki};

  --blend-primary-secondary-5: #{$blend-primary-secondary-5};
  --primary-med-or-secondary-med: #{$primary-med-or-secondary-med};
  --primary-med-or-secondary-high: #{$primary-med-or-secondary-high};
  --primary-high-or-secondary-low: #{$primary-high-or-secondary-low};
  --primary-low-mid-or-secondary-high: #{$primary-low-mid-or-secondary-high};
  --primary-low-mid-or-secondary-low: #{$primary-low-mid-or-secondary-low};
  --primary-or-primary-low-mid: #{$primary-or-primary-low-mid};
  --highlight-low-or-medium: #{$highlight-low-or-medium};
  --tertiary-or-tertiary-low: #{$tertiary-or-tertiary-low};
  --tertiary-low-or-tertiary-high: #{$tertiary-low-or-tertiary-high};
  --tertiary-med-or-tertiary: #{$tertiary-med-or-tertiary};
  --secondary-or-primary: #{$secondary-or-primary};
  --tertiary-or-white: #{$tertiary-or-white};
  --facebook-or-white: #{$facebook-or-white};
  --twitter-or-white: #{$twitter-or-white};

  --hljs-comment: #{$hljs-comment};
  --hljs-number: #{$hljs-number};
  --hljs-string: #{$hljs-string};
  --hljs-literal: #{$hljs-literal};
  --hljs-tag: #{$hljs-tag};
  --hljs-attribute: #{$hljs-attribute};
  --hljs-symbol: #{$hljs-symbol};
  --hljs-bg: #{$hljs-bg};
  --hljs-builtin-name: #{$hljs-builtin-name};
  --google: #{$google};
  --google-hover: #{$google-hover};
  --instagram: #{$instagram};
  --instagram-hover: #{$instagram-hover};
  --facebook: #{$facebook};
  --facebook-hover: #{$facebook-hover};
  --cas: #{$cas};
  --twitter: #{$twitter};
  --github: #{$github};
  --github-hover: #{$github-hover};
  --discord: #{$discord};
  --discord-hover: #{$discord-hover};

  --gold: #{$gold};
  --silver: #{$silver};
  --bronze: #{$bronze};

  --shadow-modal: 0 8px 60px rgba(0, 0, 0, #{$shadow-opacity-modal});
  --shadow-composer: 0 -1px 40px rgba(0, 0, 0, #{$shadow-opacity-composer});
  --shadow-menu-panel: 0 8px 12px rgba(0, 0, 0, #{$shadow-opacity-menu-panel});
  --shadow-card: 0 4px 14px rgba(0, 0, 0, #{$shadow-opacity-card});
  --shadow-dropdown: 0 2px 12px 0 rgba(0, 0, 0, #{$shadow-opacity-dropdown});
  --shadow-header: 0 0 0 1px var(--primary-low);
  --shadow-footer-nav: 0 0 2px 0 rgba(0, 0, 0, #{$shadow-opacity-footer-nav});
  --shadow-focus-danger: 0 0 6px 0 var(--danger);

  --float-kit-arrow-stroke-color: var(--primary-low);
  --float-kit-arrow-fill-color: var(--secondary);
}