$colors: (
  // --------------------------------------------------------------------------------
  // -- Color palette
  // --------------------------------------------------------------------------------
  "white": #fff,
  "black": #000,
  "grey-900-white-4-percent": #292a2d,
  "grey-900-white-5-percent": #35363a,
  "grey-900": #202124,
  "grey-800": #3c4043,
  "grey-700": #5f6368,
  "grey-600": #80868b,
  "grey-500": #9aa0a6,
  "grey-400": #bdc1c6,
  "grey-300": #dadce0,
  "grey-200": #e8eaed,
  "grey-100": #f1f3f4,
  "grey-50": #f8f9fa,
  "blue-900": #174ea6,
  "blue-800": #185abc,
  "blue-700": #1967d2,
  "blue-600": #1a73e8,
  "blue-500": #4285f4,
  "blue-400": #669df6,
  "blue-300": #8ab4f8,
  "blue-200": #aecbfa,
  "blue-100": #d2e3fc,
  "blue-50": #e8f0fe
);

$global: (
  "alltabs-background-color-open": cm(get-var(accent-color), get-var(tab-background-color-hover), 0.5),
  "urlbar-background-color-hover": get-var("menu-background-color-hover"),
  "urlbar-background-color-open": get-var("background-color-100"),
  "findbar-notfound-background-color": rgba(255, 0, 0, 0.3),
  // --------------------------------------------------------------------------------
  // -- Shadow
  // --------------------------------------------------------------------------------
  "elevation-2": (0 2px 4px 0 rgba(0, 0, 0, 0.28),
  ),
  "elevation-3": (rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px,
  ),
  "elevation-4": (rgba(0, 0, 0, 0.56) 0px 22px 70px 4px,
  ),
);

$dark-mode: (
  // accent color
  "accent-color": get-var(blue-300),
  "accent-color-hover": cm(transparent, get-var(accent-color), 0.8),
  "accent-color-transparent": cm(transparent, get-var(accent-color), 0.0837),
  "accent-color-transparent-active": cm(transparent, get-var(accent-color), 0.2),
  // UI background colors
  "background-color-0": get-var("grey-900"),
  "background-color-50": get-var("grey-900-white-4-percent"),
  "background-color-100": get-var("grey-900-white-5-percent"),
  // UI text
  "text-primary": get-var(grey-200),
  "text-secondary": get-var(grey-500),
  "text-disabled": get-var(text-secondary),
  // primary button text color
  "text-on-accent": get-var("grey-900"),
  "secondary-button-text": get-var(accent-color),
  // button, dropdown
  "control-background-color": cm(transparent, get-var("white"), 0.0605),
  "control-border-color": cm(transparent, get-var("white"), 0.0605),
  // input, select, textarea
  "input-background-color": get-var("background-color-0"),
  // menu, popups
  "menu-background-color": get-var(background-color-50),
  "menu-background-color-hover": cm(transparent, white, 0.15),
  "menu-border-color": get-var("grey-800"),
  // tab bar
  "tab-background-color-hover": #004a77,
  "tab-separator-color": cm(transparent, get-var("white"), 0.2),
  "tab-outline-color": cm(transparent, get-var("black"), 0.1),
  "tab-opacity": 1,
  "tab-opacity-hover": 0.5,

  "tab-icon-color": #c3c3c3,
  "tab-label-color": #e3e3e3,
  "tab-label-color-inactive": #c3c3c3,

  // nav bar
  "urlbar-background-color-hover": cm(transparent, get-var("menu-background-color-hover"), 0.7),
  "urlbar-background-color-open": get-var("background-color-50"),
  "icon-color-primary": get-var("grey-100"),
  "icon-color-secondary": get-var(grey-500),
  "content-separator-color": #606164,
  // selection colors
  "selection-text-color": get-var("white"),
  "selection-background-color": get-var(blue-900),

  // new tab search input shadow
  "search-input-shadow": 0 2px 6px 0 #20212451,
  // new tab tile background color
  "tile-background-color": #444746,
);

$light-mode: (
  // accent color
  "accent-color": get-var(blue-500),
  "accent-color-hover": cm(transparent, get-var(accent-color), 0.8),
  "accent-color-transparent": cm(transparent, get-var(accent-color), 0.0837),
  // UI background colors
  "background-color-0": #dee1e6,
  "background-color-50": get-var("grey-100"),
  "background-color-100": get-var("white"),
  // UI text
  "text-primary": get-var("grey-900"),
  "text-secondary": get-var(grey-700),
  "text-disabled": get-var(text-secondary),
  // primary button text color
  "text-on-accent": get-var("white"),
  "secondary-button-text": get-var(accent-color),
  // button, dropdown
  "control-background-color": get-var(background-color-50),
  "control-border-color": transparent,

  // input, select, textarea
  "input-background-color": get-var(background-color-100),
  // menu, popups
  "menu-background-color": get-var(background-color-100),
  "menu-background-color-hover": get-var("background-color-0"),
  "menu-border-color": get-var("background-color-0"),
  // tab bar
  "tab-background-color-hover": get-var("accent-color-transparent-active"),
  "tab-separator-color": cm(transparent, get-var("black"), 0.2),
  "tab-outline-color": cm(transparent, get-var("black"), 0.2),
  "tab-opacity": 1,
  "tab-opacity-hover": 0.5,

  "tab-icon-color": get-var("grey-900"),
  "tab-label-color": get-var("grey-900"),
  "tab-label-color-inactive": #474747,
  // nav bar
  "icon-color-primary": get-var(grey-700),
  "icon-color-secondary": get-var(grey-700),
  "content-separator-color": #dbdcdd,
  "urlbar-background-color-hover": get-var("menu-background-color-hover"),
  "urlbar-background-color-open": get-var("background-color-100"),
  // selection colors
  "selection-text-color": get-var("black"),
  "selection-background-color": get-var("blue-200"),

  // new tab search input shadow
  "search-input-shadow": 0 1px 6px 0 #20212447,
  // new tab tile background color
  "tile-background-color": #e1e3e1,
);

// optional feature: Chrome refresh colors for dark mode
$chrome-refresh-colors: (
  "accent-color": #a8c7fa,
  "background-color-0": #1f2020,
  "background-color-50": #282828,
  "background-color-100": #3c3c3c,
  "text-secondary": #c7c7c7,
  "menu-background-color": #1f1f1f,
  "menu-background-color-hover": cm(transparent, white, 0.15),
  "menu-border-color": #444746,
  "content-separator-color": #444746,
  "selection-text-color": get-var("black"),
  "selection-background-color": #a8c7fa,
  "alltabs-background-color-open": #29668c,
  "urlbar-background-color-hover": #4a4a4a,
  "urlbar-background-color-open": get-var("background-color-100"),
  "input-background-color": #1f1f1f,
);

$theme-material-light: (
  // accent color
  "accent-color": get-var(sys-color-primary),
  "accent-color-hover": cm(transparent, get-var(accent-color), 0.8),
  "accent-color-transparent": cm(transparent, get-var(accent-color), 0.0837),
  // UI background colors
  "background-color-0": cm(get-var(accent-color), get-var("grey-100"), 0.8),
  "background-color-50": cm(get-var(accent-color), get-var("grey-100"), 0.95),
  "background-color-100": cm(get-var(accent-color), white, 0.98),
  // UI text
  "text-primary": get-var(sys-color-on-surface),
  "text-secondary": get-var(sys-color-secondary),
  "text-disabled": cm(transparent, get-var(text-secondary), 0.8),
  // primary button text color
  "text-on-accent": get-var(sys-color-on-primary),
  "secondary-button-text": get-var(accent-color),
  // menu, popups
  "menu-background-color": get-var(background-color-100),
  "menu-background-color-hover": get-var("background-color-0"),
  "menu-border-color": get-var("background-color-0"),
  // tab bar
  "tab-background-color-hover": get-var("accent-color-transparent-active"),
  "tab-separator-color": cm(transparent, get-var("black"), 0.2),
  "tab-outline-color": cm(transparent, get-var("black"), 0.2),
  "tab-icon-color": get-var(text-primary),
  "tab-label-color": get-var(text-primary),
  // nav bar
  "icon-color-primary": get-var(text-secondary),
  "icon-color-secondary": get-var(text-secondary),
  "content-separator-color": #dbdcdd,
  // selection colors
  "selection-text-color": get-var(sys-color-on-primary),
  "selection-background-color": get-var(sys-color-primary)
);

$theme-material-dark: (
  // accent color
  "accent-color": get-var(sys-color-primary),
  "accent-color-hover": cm(transparent, get-var(accent-color), 0.8),
  "accent-color-transparent": cm(transparent, get-var(accent-color), 0.0837),
  // UI background colors
  "background-color-0": cm(get-var(accent-color), #1f2020, 0.9),
  "background-color-50": cm(get-var(accent-color), #282828, 0.9),
  "background-color-100": cm(get-var(accent-color), #3c3c3c, 0.9),
  // UI text
  "text-primary": get-var(sys-color-on-surface),
  "text-secondary": get-var(sys-color-secondary),
  "text-disabled": cm(transparent, get-var(text-secondary), 0.8),
  // primary button text color
  "text-on-accent": get-var(sys-color-on-primary),
  "secondary-button-text": get-var(accent-color),
  // menu, popups
  "menu-background-color": get-var(background-color-50),
  "menu-background-color-hover": cm(get-var(background-color-100), get-var(accent-color), 0.15),
  "menu-border-color": cm(get-var(sys-color-outline), #444746, 0.9),
  // tab bar
  "tab-background-color-hover": cm(transparent,
    get-var(sys-color-primary),
    0.2),
  "tab-separator-color": cm(transparent, get-var("white"), 0.2),
  "tab-outline-color": cm(transparent, get-var("black"), 0.1),
  "tab-icon-color": get-var(text-secondary),
  "tab-label-color": get-var(text-primary),
  // nav bar
  "icon-color-primary": get-var(text-primary),
  "icon-color-secondary": get-var(text-secondary),
  "content-separator-color": #606164,
  // selection colors
  "selection-text-color": get-var(sys-color-on-primary),
  "selection-background-color": get-var(sys-color-primary)
);