/*
 * Global CSS Variables
 *
 * This file contains global CSS variables that can be shared across all subprojects.
 * Currently consumed by: sustainability-marketing-site/ui.frontend
 *
 * Todo: ui.frontend.react, sustainability-annual-reports, etc.
 * Future: Will extend to other subprojects (sustainability-annual-reports, etc.)
 */

/* Theme variables: use with rgb(var(--name)) or rgba(var(--name), alpha) */
:root {
  --light-spruce: 242, 246, 245;
  --medium-spruce: 229, 237, 235;
  --sustainability-spruce: 0, 74, 58;
  --aloe: 128, 222, 154;
  --squid-ink: 22, 29, 38;
  --pistachio: 213, 240, 216;

  --dark: var(--squid-ink);
  --dark-accent: var(--aloe);
  --light: var(--light-spruce);
  --light-accent: var(--pistachio);
  --primary: var(--sustainability-spruce);
}

:root [data-theme="sustainability"] {
  --dark: var(--squid-ink);
  --dark-accent: var(--aloe);
  --light: var(--light-spruce);
  --light-accent: var(--pistachio);
  --primary: var(--sustainability-spruce);
}

:root [data-theme="blue"] {
  --dark: 10, 29, 37;
  --dark-accent: 185, 231, 245;
  --light: 240, 247, 249;
  --light-accent: 212, 238, 245;
  --primary: 0, 56, 77;
}