:root { --Base-Border-Hover: var(--Scandic-Peach-80); --Base-Border-Inverted: var(--UI-Opacity-White-100); --Base-Border-Normal: var(--Scandic-Beige-40); --Base-Border-Subtle: var(--Scandic-Beige-20); --Base-Button-Inverted-Fill-Disabled: var(--UI-Grey-20); --Base-Button-Inverted-Fill-Hover: var(--Scandic-Beige-10); --Base-Button-Inverted-Fill-Normal: var(--UI-Opacity-White-100); --Base-Button-Inverted-On-Fill-Disabled: var(--UI-Grey-40); --Base-Button-Inverted-On-Fill-Hover: var(--Scandic-Red-90); --Base-Button-Inverted-On-Fill-Normal: var(--Scandic-Red-100); --Base-Button-Primary-Fill-Disabled: var(--UI-Grey-20); --Base-Button-Primary-Fill-Hover: var(--Scandic-Red-70); --Base-Button-Primary-Fill-Normal: var(--Scandic-Red-60); --Base-Button-Primary-On-Fill-Disabled: var(--UI-Grey-40); --Base-Button-Primary-On-Fill-Hover: var(--UI-Opacity-White-100); --Base-Button-Primary-On-Fill-Normal: var(--UI-Opacity-White-100); --Base-Button-Secondary-Border-Disabled: var(--UI-Grey-30); --Base-Button-Secondary-Border-Hover: var(--Scandic-Peach-80); --Base-Button-Secondary-Border-Normal: var(--Scandic-Red-100); --Base-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0); --Base-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0); --Base-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0); --Base-Button-Secondary-On-Fill-Disabled: var(--UI-Grey-40); --Base-Button-Secondary-On-Fill-Hover: var(--Scandic-Peach-80); --Base-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100); --Base-Button-Tertiary-Fill-Disabled: var(--UI-Grey-20); --Base-Button-Tertiary-Fill-Hover: var(--Scandic-Red-90); --Base-Button-Tertiary-Fill-Normal: var(--Scandic-Red-100); --Base-Button-Tertiary-On-Fill-Disabled: var(--UI-Grey-40); --Base-Button-Tertiary-On-Fill-Hover: var(--UI-Opacity-White-100); --Base-Button-Tertiary-On-Fill-Normal: var(--UI-Opacity-White-100); --Base-Button-Text-On-Fill-Disabled: var(--UI-Grey-40); --Base-Button-Text-On-Fill-Hover: var(--Scandic-Peach-80); --Base-Button-Text-On-Fill-Normal: var(--Scandic-Red-100); --Base-Surface-Primary-dark-Normal: var(--Scandic-Peach-10); --Base-Surface-Primary-light-Hover: var(--UI-Grey-00); --Base-Surface-Primary-light-Hover-alt: var(--Scandic-Beige-10); --Base-Surface-Primary-light-Normal: var(--UI-Opacity-White-100); --Base-Surface-Secondary-light-Hover: var(--Scandic-Peach-10); --Base-Surface-Secondary-light-Normal: var(--Scandic-Beige-00); --Base-Surface-Subtle-Hover: var(--Scandic-Beige-20); --Base-Surface-Subtle-Normal: var(--Scandic-Beige-10); --Base-Text-Accent: var(--Scandic-Red-60); --Base-Text-Disabled: var(--UI-Grey-40); --Base-Text-High-contrast: var(--Scandic-Red-100); --Base-Text-Inverted: var(--UI-Opacity-White-100); --Base-Text-Medium-contrast: var(--Scandic-Peach-80); --Primary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-20); --Primary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Peach-20); --Primary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Peach-10); --Primary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-30); --Primary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Red-80); --Primary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Red-100); --Primary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20); --Primary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Peach-30); --Primary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Peach-10); --Primary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0); --Primary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0); --Primary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0); --Primary-Dark-Button-Secondary-On-Fill-Disabled: var(--UI-Opacity-White-30); --Primary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Peach-30); --Primary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Peach-10); --Primary-Dark-On-Surface-Accent: var(--Scandic-Peach-50); --Primary-Dark-On-Surface-Divider: var(--Scandic-Peach-80); --Primary-Dark-On-Surface-Text: var(--Scandic-Peach-10); --Primary-Dark-Surface-Normal: var(--Scandic-Red-100); --Primary-Dim-On-Surface-Accent: var(--Scandic-Peach-80); --Primary-Dim-On-Surface-Text: var(--Scandic-Red-100); --Primary-Dim-Surface-Normal: var(--Scandic-Peach-30); --Primary-Light-Button-Primary-Fill-Disabled: var( --UI-Opacity-Almost-Black-10 ); --Primary-Light-Button-Primary-Fill-Hover: var(--Scandic-Red-80); --Primary-Light-Button-Primary-Fill-Normal: var(--Scandic-Red-100); --Primary-Light-Button-Primary-On-Fill-Disabled: var( --UI-Opacity-Almost-Black-20 ); --Primary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Peach-30); --Primary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Peach-10); --Primary-Light-Button-Secondary-Border-Disabled: var( --UI-Opacity-Almost-Black-20 ); --Primary-Light-Button-Secondary-Border-Hover: var(--Scandic-Red-80); --Primary-Light-Button-Secondary-Border-Normal: var(--Scandic-Red-100); --Primary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0); --Primary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0); --Primary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0); --Primary-Light-Button-Secondary-On-Fill-Disabled: var( --UI-Opacity-Almost-Black-20 ); --Primary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-80); --Primary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100); --Primary-Light-On-Surface-Accent: var(--Scandic-Red-60); --Primary-Light-On-Surface-Divider: var(--Scandic-Peach-30); --Primary-Light-On-Surface-Divider-subtle: var(--Scandic-Beige-10); --Primary-Light-On-Surface-Text: var(--Scandic-Red-100); --Primary-Light-Surface-Normal: var(--Scandic-Peach-10); --Primary-Strong-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-20); --Primary-Strong-Button-Primary-Fill-Hover: var(--Scandic-Red-00); --Primary-Strong-Button-Primary-Fill-Normal: var(--UI-Opacity-White-100); --Primary-Strong-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20); --Primary-Strong-Button-Primary-On-Fill-Hover: var(--Scandic-Red-70); --Primary-Strong-Button-Primary-On-Fill-Normal: var(--Scandic-Red-70); --Primary-Strong-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20); --Primary-Strong-Button-Secondary-Border-Hover: var(--Scandic-Peach-00); --Primary-Strong-Button-Secondary-Border-Normal: var(--UI-Opacity-White-100); --Primary-Strong-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0); --Primary-Strong-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0); --Primary-Strong-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0); --Primary-Strong-Button-Secondary-On-Fill-Disabled: var( --UI-Opacity-White-20 ); --Primary-Strong-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-00); --Primary-Strong-Button-Secondary-On-Fill-Normal: var(--UI-Opacity-White-100); --Primary-Strong-On-Surface-Accent: var(--Scandic-Peach-10); --Primary-Strong-On-Surface-Text: var(--UI-Opacity-White-100); --Primary-Strong-Surface-Normal: var(--Scandic-Red-60); --Secondary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-10); --Secondary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Green-30); --Secondary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Green-20); --Secondary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20); --Secondary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Green-80); --Secondary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Green-90); --Secondary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20); --Secondary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Green-30); --Secondary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Green-20); --Secondary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0); --Secondary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0); --Secondary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0); --Secondary-Dark-Button-Secondary-On-Fill-Disabled: var( --UI-Opacity-White-20 ); --Secondary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Green-30); --Secondary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Green-20); --Secondary-Light-Button-Primary-Fill-Disabled: var( --UI-Opacity-Almost-Black-10 ); --Secondary-Light-Button-Primary-Fill-Hover: var(--Scandic-Green-80); --Secondary-Light-Button-Primary-Fill-Normal: var(--Scandic-Green-90); --Secondary-Light-Button-Primary-On-Fill-Disabled: var( --UI-Opacity-Almost-Black-20 ); --Secondary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Green-30); --Secondary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Green-20); --Secondary-Light-Button-Secondary-Border-Disabled: var( --UI-Opacity-Almost-Black-20 ); --Secondary-Light-Button-Secondary-Border-Hover: var(--Scandic-Green-80); --Secondary-Light-Button-Secondary-Border-Normal: var(--Scandic-Green-90); --Secondary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0); --Secondary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0); --Secondary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0); --Secondary-Light-Button-Secondary-On-Fill-Disabled: var( --UI-Opacity-Almost-Black-20 ); --Secondary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Green-80); --Secondary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Green-90); --Secondary-Light-On-Surface-Accent: var(--Scandic-Green-50); --Secondary-Light-On-Surface-Text: var(--Scandic-Green-90); --Secondary-Light-Surface-Normal: var(--Scandic-Green-20); --Tertiary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-10); --Tertiary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Yellow-20); --Tertiary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Yellow-10); --Tertiary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20); --Tertiary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Blue-80); --Tertiary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Blue-100); --Tertiary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20); --Tertiary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Yellow-20); --Tertiary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Yellow-10); --Tertiary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0); --Tertiary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0); --Tertiary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0); --Tertiary-Dark-Button-Secondary-On-Fill-Disabled: var(--UI-Opacity-White-20); --Tertiary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Yellow-20); --Tertiary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Yellow-10); --Tertiary-Light-Button-Primary-Fill-Disabled: var( --UI-Opacity-Almost-Black-10 ); --Tertiary-Light-Button-Primary-Fill-Hover: var(--Scandic-Blue-90); --Tertiary-Light-Button-Primary-Fill-Normal: var(--Scandic-Blue-100); --Tertiary-Light-Button-Primary-On-Fill-Disabled: var( --UI-Opacity-Almost-Black-20 ); --Tertiary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Yellow-00); --Tertiary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Yellow-10); --Tertiary-Light-Button-Secondary-Border-Disabled: var( --UI-Opacity-Almost-Black-20 ); --Tertiary-Light-Button-Secondary-Border-Hover: var(--Scandic-Blue-90); --Tertiary-Light-Button-Secondary-Border-Normal: var(--Scandic-Blue-100); --Tertiary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0); --Tertiary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0); --Tertiary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0); --Tertiary-Light-Button-Secondary-On-Fill-Disabled: var( --UI-Opacity-Almost-Black-20 ); --Tertiary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Blue-90); --Tertiary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Blue-100); --Tertiary-Light-On-Surface-Accent: var(--Scandic-Yellow-50); --Tertiary-Light-On-Surface-Text: var(--Scandic-Blue-100); --Tertiary-Light-Surface-Normal: var(--Scandic-Yellow-10); --UI-Input-Controls-Border-Disabled: var(--UI-Grey-40); --UI-Input-Controls-Border-Focus: var(--Scandic-Blue-80); --UI-Input-Controls-Border-Normal: var(--Scandic-Beige-50); --UI-Input-Controls-Fill-Selected: var(--Scandic-Blue-80); --UI-Input-Controls-On-Fill-Normal: var(--UI-Opacity-White-100); --UI-Input-Controls-Surface-Disabled: var(--UI-Grey-10); --UI-Input-Controls-Surface-Hover: var(--Scandic-Beige-10); --UI-Input-Controls-Surface-Normal: var(--UI-Opacity-White-100); --UI-Semantic-Error: var(--Scandic-Red-70); --UI-Semantic-Information: var(--Scandic-Blue-70); --UI-Semantic-Success: var(--Scandic-Green-60); --UI-Semantic-Warning: var(--Scandic-Yellow-60); --UI-Text-Active: var(--Scandic-Blue-90); --UI-Text-Error: var(--Scandic-Red-70); --UI-Text-High-contrast: var(--UI-Grey-100); --UI-Text-Medium-contrast: var(--UI-Grey-80); --UI-Text-Placeholder: var(--UI-Grey-60); } :root { --Corner-Radius-Large: 12px; --Corner-Radius-Medium: 8px; --Corner-Radius-Rounded: 250px; --Layout-Desktop-Margin-Margin-min: 40px; --Layout-Mobile-Margin-Margin-min: 16px; --Layout-Tablet-Margin-Margin-min: 24px; } :root { --Scandic-Beige-00: #faf6f2; --Scandic-Beige-10: #f2ece6; --Scandic-Beige-20: #e3d9d1; --Scandic-Beige-40: #b8a79a; --Scandic-Beige-50: #9c8a7e; --Scandic-Beige-70: #6b584d; --Scandic-Blue-00: #e8f6ff; --Scandic-Blue-40: #79aee7; --Scandic-Blue-50: #5b8fd4; --Scandic-Blue-60: #3f6dbd; --Scandic-Blue-70: #284ea0; --Scandic-Blue-80: #18347f; --Scandic-Blue-90: #0d1f5f; --Scandic-Blue-100: #0d1440; --Scandic-Brand-Burgundy: #4d001b; --Scandic-Brand-Pale-Peach: #f7e1d5; --Scandic-Brand-Scandic-Red: #cd0921; --Scandic-Brand-Warm-White: #faf6f2; --Scandic-Green-00: #f3fce8; --Scandic-Green-20: #d2edaf; --Scandic-Green-30: #acdb8a; --Scandic-Green-40: #7cb865; --Scandic-Green-50: #539e49; --Scandic-Green-60: #348337; --Scandic-Green-70: #256931; --Scandic-Green-80: #164e29; --Scandic-Green-90: #093021; --Scandic-Peach-00: #fff3ed; --Scandic-Peach-10: #f7e1d5; --Scandic-Peach-20: #f4d5c8; --Scandic-Peach-30: #f0c1b6; --Scandic-Peach-40: #e9aba3; --Scandic-Peach-50: #de9490; --Scandic-Peach-70: #b05b65; --Scandic-Peach-80: #8f4350; --Scandic-Peach-90: #642636; --Scandic-Peach-100: #4d0f25; --Scandic-Red-00: #ffebeb; --Scandic-Red-60: #cd0921; --Scandic-Red-70: #ad0015; --Scandic-Red-80: #8d0011; --Scandic-Red-90: #6d000d; --Scandic-Red-100: #4d001b; --Scandic-Yellow-00: #fff8e3; --Scandic-Yellow-10: #fff0c2; --Scandic-Yellow-20: #fade89; --Scandic-Yellow-50: #e59515; --Scandic-Yellow-60: #d17308; --UI-Grey-00: #f9f6f4; --UI-Grey-10: #ebe8e6; --UI-Grey-20: #d6d2d0; --UI-Grey-30: #c2bdba; --UI-Grey-40: #a8a4a2; --UI-Grey-60: #787472; --UI-Grey-80: #57514e; --UI-Grey-100: #26201e; --UI-Opacity-Almost-Black-10: #1f1c1b1a; --UI-Opacity-Almost-Black-30: #1f1c1b4d; --UI-Opacity-White-0: #ffffff00; --UI-Opacity-White-10: #ffffff1a; --UI-Opacity-White-20: #ffffff33; --UI-Opacity-White-30: #ffffff4d; --UI-Opacity-White-100: #ffffff; } :root { --Main-Brand-Burgundy: #4d001b; --Main-Brand-PalePeach: #f7e1d5; --Main-Brand-WarmWhite: #faf6f2; --Main-Grey-10: #ebe8e6; --Main-Grey-40: #a8a4a2; --Main-Grey-60: #787472; --Main-Grey-100: #26201e; --Main-Grey-White: #ffffff; --Main-Yellow-100: #301508; }