/**
 * World Bank LOOP design tokens (subset for curated-cards).
 *
 * Copyright 2020 Adobe. All rights reserved.
 * Licensed under the Apache License, Version 2.0.
 * Token values excerpted / aligned with public WBG LOOP stylesheets.
 *
 * @see https://www.apache.org/licenses/LICENSE-2.0
 */

:root {
	--black: #000;
	--transparent: #fff0;
	--white: #fff;
	--blue-05: #f6fcff;
	--blue-10: #e9f7fd;
	--blue-20: #cde7f9;
	--blue-30: #a3daff;
	--blue-40: #169af3;
	--blue-50-base: #0071bc;
	--blue-55: #066db1;
	--blue-60: #00538a;
	--blue-70: #004370;
	--blue-80: #053657;
	--blue-90: #012740;
	--blue-100: #002035;
	--blue-120: #001c2d;
	--blue-60-alpha-60-a: #00538a99;
	--neutral-solid-05-s: #f5f7f9;
	--neutral-solid-10-s: #e7edf3;
	--neutral-solid-15-s: #dae3eb;
	--neutral-solid-20-s: #d4dee8;
	--neutral-solid-30-s: #bdccdb;
	--neutral-solid-40-s: #8a9db1;
	--neutral-solid-60-s: #4b5e71;
	--neutral-solid-70-s: #3d4c5c;
	--neutral-solid-80-s: #252e37;
	--neutral-solid-90-s: #181f25;
	--neutral-solid-95-s: #181f25;
	--neutral-alpha-08-a: #00396b14;
	--neutral-alpha-16-a: #00396b29;
	--neutral-alpha-24-a: #00396b3d;
	--neutral-alpha-42-a: #00294d6b;
	--neutral-alpha-57-a: #000d1a91;
	--neutral-alpha-70-a: #000d1ab2;
	--neutral-alpha-95-a: #000d1af5;
	--gray-alpha-white-16-a: #ffffff29;
	--gray-alpha-white-24-a: #ffffff3d;
	--gray-alpha-white-48-a: #ffffff7a;
	--gray-alpha-white-60-a: #fff9;
	--gray-alpha-white-75-a: #ffffffbf;
	--gray-alpha-white-90-a: #ffffffe5;
	--purple-40: #c17cfe;
	--purple-70: #5c01ac;
	--accent-blue-primary-05: var(--blue-05);
	--accent-blue-primary-10: var(--blue-10);
	--accent-blue-primary-40: var(--blue-40);
	--accent-blue-primary-50: var(--blue-50-base);
	--accent-blue-primary-60: var(--blue-60);
	--accent-blue-primary-70: var(--blue-70);
	--accent-blue-primary-80: var(--blue-80);
	--accent-blue-primary-90: var(--blue-90);
	--global-primary: var(--blue-70);
	--global-secondary: var(--blue-40);
	--text-color: var(--neutral-solid-90-s);
	--text-on-dark-default: var(--gray-alpha-white-75-a);
	--text-on-dark-emphasis: var(--gray-alpha-white-90-a);
	--text-on-dark-subdued: var(--gray-alpha-white-60-a);
	--text-on-light-default: var(--neutral-alpha-70-a);
	--text-on-light-emphasis: var(--neutral-alpha-95-a);
	--text-on-light-link-primary-enabled: var(--global-primary);
	--global-interactive-on-light-hover: var(--global-secondary);
	--global-interactive-on-dark-hover: var(--blue-40);
	--global-interactive-on-dark-focused: var(--blue-50-base);
	--global-interactive-on-light-focused: var(--blue-30);
	--global-interactive-on-light-visited: var(--purple-70);
	--global-interactive-on-dark-visited: var(--purple-40);
	--global-interactive-on-light-disabled: var(--neutral-solid-30-s);
	--global-states-disable-medium: var(--neutral-solid-40-s);
	--global-states-disable-regular: var(--neutral-solid-20-s);
	--divider-on-dark-emphasis: var(--gray-alpha-white-60-a);
	--divider-on-dark-subdued: var(--gray-alpha-white-24-a);
	--divider-on-dark-highlight: var(--accent-blue-primary-40);
	--button-primary-background-enabled: var(--accent-blue-primary-70);
	--button-primary-label-default: var(--gray-alpha-white-90-a);
	--button-secondary-outline-enabled: var(--accent-blue-primary-70);
	--button-secondary-label-enabled: var(--accent-blue-primary-70);
	--outline-transparent: var(--transparent);
	--links-focus-color: #da570e;
	--border-radius-none: 0rem;
	--border-radius-small: 0.125rem;
	--border-radius-base: 0.25rem;
	--border-radius-medium: 0.5rem;
	--border-radius-large: 1rem;
	--border-radius-x-large: 2rem;
	--screen-width: 1456px;
	--section-container-space: var(--spacing-xxlarge);
	--padding-between-sections: var(--spacing-huge);
	--padding-wb-paragraphs: var(--spacing-medium);
	--spacing-none: 0rem;
	--spacing-tiny: 0.25rem;
	--spacing-xxsmall: 0.25rem;
	--spacing-xsmall: 0.5rem;
	--spacing-small: 0.5rem;
	--spacing-regular: 1rem;
	--spacing-medium: 1.25rem;
	--spacing-large: 1.5rem;
	--spacing-xlarge: 1.75rem;
	--spacing-xxlarge: 2rem;
	--spacing-huge: 2.5rem;
	--spacing-xhuge: 4rem;
	--spacing-xxhuge: 5rem;
	--font-size-100: 0.75rem;
	--font-size-150: 0.8125rem;
	--font-size-200: 0.875rem;
	--font-size-300: 1rem;
	--font-size-400: 1rem;
	--font-size-500: 1rem;
	--font-size-600: 1.125rem;
	--font-size-700: 1.25rem;
	--font-size-800: 1.5rem;
	--font-size-900: 1.5rem;
	--font-size-1000: 1.75rem;
	--font-size-1100: 1.75rem;
	--font-size-1200: 2.25rem;
	--body-font-size: var(--font-size-500);
	--body-font-weight-bold: bold;
	--body-font-weight-regular: 500;
	--heading-font-weight: var(--body-font-weight-bold);
	--label-font-weight: var(--body-font-weight-bold);
	--font-weight-700: 700;
	--body-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--heading-font-family: var(--body-font-family);
	--button-vertical-padding: 12px;
	--button-horizontal-padding: 32px;
	--loop-images-corner-radius: 0.25rem;
	--section-gutter-space: 28px;
	--grid-gutter: 1rem;
	--lift-border-radius-base: var(--border-radius-base);
	--theloop-xl-button-font-size: var(--font-size-300);
	--theloop-button-label-font-weight: 700;
	--theloop-button-label-line-height: 1.5rem;
	--theloop-button-label-letter-spacing: -0.0312rem;
	--theloop-button-v-padding: var(--button-vertical-padding);
	--theloop-button-h-padding: var(--button-horizontal-padding);
}

@media (width >= 768px) {
	:root {
		--section-gutter-space: 48px;
		--grid-gutter: 1.5rem;
		--spacing-regular: 1.25rem;
		--spacing-medium: 1.5rem;
		--spacing-large: 1.75rem;
		--spacing-xlarge: 2rem;
		--spacing-xxlarge: 2.5rem;
		--spacing-huge: 3.5rem;
		--spacing-xhuge: 5rem;
		--spacing-xxhuge: 6rem;
		--font-size-400: 1.125rem;
		--font-size-500: 1.125rem;
		--font-size-600: 1.25rem;
		--font-size-700: 1.5rem;
		--font-size-800: 1.75rem;
		--font-size-900: 1.75rem;
		--font-size-1000: 2rem;
		--font-size-1100: 2.25rem;
		--font-size-1200: 2.75rem;
		--body-font-size: var(--font-size-500);
		--loop-images-corner-radius: 0.5rem;
	}
}

@media (width >= 1024px) {
	:root {
		--section-gutter-space: 72px;
		--grid-gutter: 2rem;
		--spacing-regular: 1.5rem;
		--spacing-medium: 2rem;
		--spacing-large: 2.5rem;
		--spacing-xlarge: 3rem;
		--spacing-xxlarge: 4rem;
		--spacing-huge: 5rem;
		--spacing-xhuge: 6rem;
		--spacing-xxhuge: 7.5rem;
		--font-size-400: 1.125rem;
		--font-size-500: 1.25rem;
		--font-size-600: 1.5rem;
		--font-size-700: 1.75rem;
		--font-size-800: 2rem;
		--font-size-900: 2.25rem;
		--font-size-1000: 2.5rem;
		--font-size-1100: 3rem;
		--font-size-1200: 3.75rem;
		--body-font-size: var(--font-size-500);
		--button-vertical-padding: 16px;
	}
}