/*
  ================================================================================================================
  |   New ING Visual Identity.                                                                                   |
  |   Figma: "https://www.figma.com/design/5R4qTMRg6K6FiIu52Z1siS/BASE-CMS---SYS-ES-RES?node-id=99-58261&m=dev"  |
  ================================================================================================================
*/


/** Base tokens for NVI Colors */
:host,
html {
  --cms-orange: #FF6200; /* Token: orange */
  --cms-white: #FFFFFF; /* Token: white */
  --cms-grey_10: #F7F4F1; /* Token: grey.10 */
  --cms-grey_20: #DDD6CF; /* Token: grey.20 */
  --cms-grey_30: #A69F98; /* Token: grey.30 */
  --cms-grey_40: #6C6763; /* Token: grey.40 */
  --cms-grey_50: #403B3B; /* Token: grey.50 */
  --cms-grey_60: #302C2C; /* Token: grey.60 */
  --cms-grey_70: #201E1E; /* Token: grey.70 */
  --cms-grey_80: #111010; /* Token: grey.80 */
  --cms-black: #0D0804; /* Token: black */

  --cms-violet_10: #F1E9FF; /* Token: violet.10 */
  --cms-violet_50: #B487FF; /* Token: violet.50 */
  --cms-violet_100: #7724FF; /* Token: violet.100 */
  --cms-violet_150: #3C1280; /* Token: violet.150 */

  --cms-raspberry_10: #FBE6F5; /* Token: raspberry.10 */
  --cms-raspberry_50: #FF68D5; /* Token: raspberry.50 */
  --cms-raspberry_100: #D40199; /* Token: raspberry.100 */
  --cms-raspberry_150: #8F096A; /* Token: raspberry.150 */

  --cms-blush_50: #FF9FC7; /* Token: blush.50 */
  --cms-blush_100: #F689FD; /* Token: blush.100 */
  --cms-blush_150: #BE08C9; /* Token: blush.150 */

  --cms-maroon_50: #FABEFE; /* Token: maroon.50 */
  --cms-maroon_100: #4D0020; /* Token: maroon.100 */
  --cms-maroon_150: #340016; /* Token: maroon.150 */

  --cms-sky_10: #E4F5FF; /* Token: sky.10 */
  --cms-sky_50: #BEE8FE; /* Token: sky.50 */
  --cms-sky_100: #89D6FD; /* Token: sky.100 */
  --cms-sky_150: #185A7B; /* Token: sky.150 */

  --cms-sun_10: #FFFCE5; /* Token: sun.10 */
  --cms-sun_50: #FFEE73; /* Token: sun.50 */
  --cms-sun_100: #FFE100; /* Token: sun.100 */
  --cms-sun_150: #AA9600; /* Token: sun.150 */

  --cms-green_10: #CDF4D8; /* Token: green.10 */
  --cms-green_50: #65FF39; /* Token: green.50 */
  --cms-green_100: #1E8700; /* Token: green.100 */
  --cms-green_150: #0F4400; /* Token: green.150 */

  --cms-red_10: #FFCFBF; /* Token: red.10 */
  --cms-red_50: #FF3D00; /* Token: red.50 */
  --cms-red_100: #CE2323; /* Token: red.100 */
  --cms-red_150: #671900; /* Token: red.150 */
}

/** Base tokens for NVI Font size */
:host,
html {
  --cms-font-10: 10px; /* Token: fontSize.10 */
  --cms-font-12: 12px; /* Token: fontSize.12 */
  --cms-font-14: 14px; /* Token: fontSize.14 */
  --cms-font-16: 16px; /* Token: fontSize.16 */
  --cms-font-19: 19px; /* Token: fontSize.19 */
  --cms-font-24: 24px; /* Token: fontSize.24 */
  --cms-font-28: 28px; /* Token: fontSize.28 */
  --cms-font-32: 32px; /* Token: fontSize.32 */
  --cms-font-36: 36px; /* Token: fontSize.36 */
  --cms-font-40: 40px; /* Token: fontSize.40 */
  --cms-font-48: 48px; /* Token: fontSize.48 */
  --cms-font-56: 56px; /* Token: fontSize.56 */
  --cms-font-64: 64px; /* Token: fontSize.64 */
}

/** Base tokens for NVI line-height */
:host,
html {
  --cms-line-height-16: 16px; /* Token: lineHeight.16 */
  --cms-line-height-20: 20px; /* Token: lineHeight.20 */
  --cms-line-height-24: 24px; /* Token: lineHeight.24 */
  --cms-line-height-28: 28px; /* Token: lineHeight.28 */
  --cms-line-height-32: 32px; /* Token: lineHeight.32 */
  --cms-line-height-36: 36px; /* Token: lineHeight.36 */
  --cms-line-height-40: 40px; /* Token: lineHeight.40 */
  --cms-line-height-44: 44px; /* Token: lineHeight.44 */
  --cms-line-height-48: 48px; /* Token: lineHeight.48 */
  --cms-line-height-52: 52px; /* Token: lineHeight.52 */
  --cms-line-height-64: 64px; /* Token: lineHeight.52 */
}

/** Base tokens for NVI Spacing */
:host,
html {
  --cms-2: 2px; /* Token: spacing.2 */
  --cms-4: 4px; /* Token: spacing.4 */
  --cms-8: 8px; /* Token: spacing.8 */
  --cms-12: 12px; /* Token: spacing.12 */
  --cms-16: 16px; /* Token: spacing.16 */
  --cms-20: 20px; /* Token: spacing.20 */
  --cms-24: 24px; /* Token: spacing.24 */
  --cms-32: 32px; /* Token: spacing.32 */
  --cms-40: 40px; /* Token: spacing.40 */
  --cms-48: 48px; /* Token: spacing.48 */
  --cms-56: 56px; /* Token: spacing.56 */
  --cms-64: 64px; /* Token: spacing.64 */
  --cms-72: 72px; /* Token: spacing.72 */
  --cms-80: 80px; /* Token: spacing.80 */
}

@font-face {
  font-family: 'INGDisplay';
  src: url('../INGDisplay/INGdisplay-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

ing-content:not(:defined),
ing-section:not(:defined),
ing-block:not(:defined) {
  visibility: visible !important;
}