$color-white: #fff;
$color-black: #000;
$color-blue: #1D35B4;
$color-blueberry: #3858E9;
$color-gray-900: #1E1E1E;
$color-gray-800: #2F2F2F;
$color-gray-700: #757575;
$color-gray-600: #949494;
$color-gray-500: #BBBBBB;
$color-gray-400: #CCCCCC;
$color-gray-300: #EBEBEB;
$color-gray-200: #E0E0E0;
$color-gray-100: #F0F0F0;
$color-gray: #646970;
$color-text-tertiary: #505050;
$color-text-text: #070707;
$color-border: #AEAEAE;
$color-divider: #F0F0F0;

$shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
$shadow-selection-box: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
$color-gradient-dark: #001435;
$gradient-header: linear-gradient(87.03deg, #003087 -0.49%, #001E51 29.22%, $color-gradient-dark 100%);

$max-width-onboarding: 1024px;
$max-width-onboarding-content: 500px;
$max-width-settings: 938px;

$card-vertical-gap: 48px;

/* define custom theming options */

:root {
	--ppcp-color-app-bg: #{$color-white};
}

#ppcp-settings-container {
	--max-width-settings: #{$max-width-settings};
	--max-width-onboarding: #{$max-width-onboarding};
	--max-width-onboarding-content: #{$max-width-onboarding-content};

	--max-container-width: var(--max-width-settings);

	--color-black: #{$color-black};
	--color-white: #{$color-white};
	--color-blueberry: #{$color-blueberry};
	--color-gray-900: #{$color-gray-900};
	--color-gray-800: #{$color-gray-800};
	--color-gray-700: #{$color-gray-700};
	--color-gray-600: #{$color-gray-600};
	--color-gray-500: #{$color-gray-500};
	--color-gray-400: #{$color-gray-400};
	--color-gray-300: #{$color-gray-300};
	--color-gray-200: #{$color-gray-200};
	--color-gray-100: #{$color-gray-100};
	--color-gradient-dark: #{$color-gradient-dark};

	--color-text-title: #{$color-gray-900};
	--color-text-main: #{$color-text-text};
	--color-text-teriary: #{$color-text-tertiary};
	--color-text-description: #{$color-gray-700};
}