/*
 * Design tokens for the visitor pages and the embed dialogs: every color,
 * font size, spacing, radius, shadow, and transition they use. Linked first
 * by every visitor page and imported by cdn/budget-tool.css. Prefixed --bt-
 * because the embed stylesheet also loads on Voya's own pages.
 *
 * Values are the legacy tool's (css/style.css, css/responsive.css, and the
 * page's inline styles), with near duplicates snapped to one token.
 */

:root {
	/* Colors */
	--bt-color-white: #fff;
	--bt-color-black: #000;
	--bt-color-page: #f5f7f7;
	--bt-color-ink: #2d3030;
	--bt-color-ink-strong: #231f20;
	--bt-color-gray-700: #494c4c;
	--bt-color-gray-600: #64666b;
	--bt-color-gray-500: #6e6e6e;
	--bt-color-gray-300: #999;
	--bt-color-gray-200: #ccc;
	--bt-color-gray-100: #d4d4d4;
	--bt-color-charcoal: #333;
	--bt-color-blue: #145a7b;
	--bt-color-blue-dark: #0f375a;
	--bt-color-orange: #d75426;
	--bt-color-purple: #551b57;
	--bt-color-link: #0000ee;
	--bt-color-error-bg: #ffecec;
	--bt-color-shadow-soft: rgb(212 212 212 / 50%);
	--bt-color-shadow-menu: rgb(51 51 51 / 25%);
	--bt-color-shadow-tip: rgb(0 0 0 / 15%);
	--bt-color-transparent: transparent;

	/* Typography */
	--bt-font-body: 'Proxima Nova Rg', arial, sans-serif;
	--bt-font-heading: 'Proxima Nova Lt', 'Proxima Nova Rg', arial, sans-serif;
	--bt-font-size-xs: 13px;
	--bt-font-size-sm: 14px;
	--bt-font-size-md: 16px;
	--bt-font-size-lg: 18px;
	--bt-font-size-xl: 20px;
	--bt-font-size-2xl: 22px;
	--bt-font-size-3xl: 24px;
	--bt-font-size-4xl: 25px;
	--bt-font-size-5xl: 26px;
	--bt-font-size-6xl: 28px;
	--bt-font-size-7xl: 30px;
	--bt-font-size-display: 40px;
	--bt-font-weight-regular: 400;
	--bt-font-weight-medium: 500;
	--bt-font-weight-semibold: 600;
	--bt-font-weight-bold: 700;
	--bt-line-height-tight: 1;
	--bt-line-height-base: 1.5;

	/* Spacing */
	--bt-space-1: 2px;
	--bt-space-2: 4px;
	--bt-space-3: 5px;
	--bt-space-4: 8px;
	--bt-space-5: 10px;
	--bt-space-6: 15px;
	--bt-space-7: 20px;
	--bt-space-8: 25px;
	--bt-space-9: 30px;
	--bt-space-10: 35px;
	--bt-space-11: 40px;
	--bt-space-12: 50px;
	--bt-space-13: 60px;

	/* Radii */
	--bt-radius-sm: 4px;
	--bt-radius-md: 5px;
	--bt-radius-lg: 10px;
	--bt-radius-pill: 30px;
	--bt-radius-round: 50%;

	/* Shadows */
	--bt-shadow-card: 0 2px 4px var(--bt-color-gray-300);
	--bt-shadow-header: 0 2px 4px var(--bt-color-shadow-soft);
	--bt-shadow-tip: 0 0 7px 1px var(--bt-color-gray-200);
	--bt-shadow-popover: 0 4px 16px var(--bt-color-shadow-tip);
	--bt-shadow-menu: 0 10px 45px -1px var(--bt-color-shadow-menu);
	--bt-shadow-none: none;

	/* Focus */
	--bt-focus-ring: 2px solid var(--bt-color-blue);
	--bt-focus-dashed: 2px dashed var(--bt-color-blue);

	/* Transitions */
	--bt-transition-base: 0.5s;
	--bt-transition-fade: opacity 0.6s;
}