/**
 * Base Tokens
 */

:root {
  --r-amethyst-400: #4925cb; /** For enabled state of links (visited) in lightmode */
  --r-amethyst-500: #39277a; /** For hovered and activated state of links (visited) in lightmode */
  --r-azure-400: #014bb3; /** For enabled state of links (not visited) in lightmode */
  --r-azure-500: #24346f; /** For hovered and activated state of links (not visited) in lightmode */
  --r-blue-100: #f8fafb; /** Used for (lightmode) status-info-soft */
  --r-blue-400: #3e5c73; /** Used for (lightmode) status-info-regular */
  --r-charcoal-200: #c9c9c9;
  --r-charcoal-300: #686868;
  --r-charcoal-400: #282828;
  --r-charcoal-400-alpha-04: rgba(40, 40, 40, 0.04); /** Used for (lightmode) background-state-hovered */
  --r-charcoal-400-alpha-08: rgba(40, 40, 40, 0.08); /** Used for (lightmode) background-state-selected */
  --r-charcoal-400-alpha-12: rgba(40, 40, 40, 0.12); /** Used for (lightmode) background-state-activated */
  --r-charcoal-500: #141414;
  --r-charcoal-600: #000000;
  --r-charcoal-600-alpha-48: rgba(0, 0, 0, 0.48); /** Used for (lightmode) background-overlay */
  --r-charcoal-600-alpha-80: rgba(0, 0, 0, 0.8); /** Used for (darkmode) background-overlay */
  --r-dark-amethyst-100: #e6d4ff; /** For hovered and activated state of links (visited) in darkmode */
  --r-dark-amethyst-200: #d0a8ff; /** For enabled state of links (visited) in darkmode */
  --r-dark-azure-100: #d6e6ff; /** For hovered and activated state of links (not visited) in darkmode */
  --r-dark-azure-200: #a8c9ff; /** For enabled state of links (not visited) in darkmode */
  --r-dark-blue-100: #afc3d4; /** Used for (darkmode) status-info-regular */
  --r-dark-blue-500: #222528; /** Used for (darkmode) status-info-soft */
  --r-dark-green-100: #80ce88; /** Used for (darkmode) status-success-regular */
  --r-dark-green-500: #212b22; /** Used for (darkmode) status-success-soft */
  --r-dark-orange-100: #ffb557; /** Used for (darkmode) status-warning-regular */
  --r-dark-orange-500: #31281c; /** Used for (darkmode) status-warning-soft */
  --r-dark-red-100: #ff969c; /** Used for (darkmode) status-error-regular */
  --r-dark-red-500: #190606; /** Used for (darkmode) status-error-soft */
  --r-dark-vanguard-100: #6da258;
  --r-dark-vanguard-200: #587d4a;
  --r-dark-vanguard-300: #3d4d36;
  --r-dark-vanguard-400: #323a2f;
  --r-ember-400: #ef706b;
  --r-focused-400: #0071e3; /** Used for focused outline in both lightmode and darkmode */
  --r-green-100: #f7fdf8; /** Used for (lightmode) status-success-soft */
  --r-green-400: #298535; /** Used for (lightmode) status-success-regular */
  --r-haze-200: #f3f1f0;
  --r-haze-200-alpha-04: rgba(243, 241, 240, 0.04); /** Used for (darkmode) background-state-hovered */
  --r-haze-200-alpha-08: rgba(243, 241, 240, 0.08); /** Used for (darkmode) background-state-selected */
  --r-haze-200-alpha-12: rgba(243, 241, 240, 0.12); /** Used for (darkmode) background-state-activated */
  --r-haze-300: #ece9e8;
  --r-haze-400: #e7e4e2;
  --r-haze-500: #d4d1cf;
  --r-haze-600: #bfbdbb;
  --r-neutral-white: #ffffff;
  --r-orange-100: #fef9f5; /** Used for (lightmode) status-warning-soft */
  --r-orange-400: #ff7429; /** Used for (lightmode) status-warning-regular */
  --r-red-100: #fef6f6; /** Used for (lightmode) status-error-soft */
  --r-red-400: #b00c15; /** Used for (lightmode) status-error-regular */
  --r-vanguard-100: #e5ebe3;
  --r-vanguard-200: #cbd7c6;
  --r-vanguard-300: #86a27b;
  --r-vanguard-400: #527a42;
  --r-vanguard-500: #456637;
  --r-vanguard-600: #37522c;
  --r-spacing-025: 0.25rem;
  --r-spacing-050: 0.5rem;
  --r-spacing-075: 0.75rem;
  --r-spacing-100: 1rem;
  --r-spacing-125: 1.25rem;
  --r-spacing-150: 1.5rem;
  --r-spacing-175: 1.75rem;
  --r-spacing-200: 2rem;
  --r-spacing-225: 2.25rem;
  --r-spacing-250: 2.5rem;
  --r-spacing-275: 2.75rem;
  --r-spacing-300: 3rem;
  --r-spacing-350: 3.5rem;
  --r-spacing-400: 4rem;
  --r-spacing-450: 4.5rem;
  --r-spacing-500: 5rem;
  --r-icon-size-l: 2rem;
  --r-icon-size-m: 1.5rem;
  --r-icon-size-s: 1rem;
  --r-font-family-heading: "GT Ultra Median", Skeena, ui-serif, serif;
  --r-font-family-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r-font-size-desktop-200: 0.8125rem;
  --r-font-size-desktop-300: 0.875rem;
  --r-font-size-desktop-400: 1rem;
  --r-font-size-desktop-500: 1.375rem;
  --r-font-size-desktop-600: 1.75rem;
  --r-font-size-desktop-700: 2.25rem;
  --r-font-size-desktop-800: 2.875rem;
  --r-font-size-desktop-900: 3.5rem;
  --r-font-size-mobile-200: 0.8125rem;
  --r-font-size-mobile-300: 0.875rem;
  --r-font-size-mobile-400: 1rem;
  --r-font-size-mobile-500: 1.25rem;
  --r-font-size-mobile-600: 1.5rem;
  --r-font-size-mobile-700: 1.75rem;
  --r-font-size-mobile-800: 1.875rem;
  --r-font-size-mobile-900: 2.625rem;
  --r-font-weight-light: 300;
  --r-font-weight-regular: 400;
  --r-font-weight-semibold: 600;
  --r-line-height-l: 1.7;
  --r-line-height-m: 1.5;
  --r-line-height-s: 1.2;
  --r-line-height-xs: 1.1;
}

/**
 * Deprecated Tokens
 */

:root {
  --r-dark-azure-400: var(--r-dark-azure-200); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-blue-300: var(--r-dark-blue-100); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-blue-600: var(--r-dark-blue-500); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-green-400: var(--r-dark-green-100); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-orange-400: var(--r-dark-orange-100); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-red-600: var(--r-dark-red-500); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-dark-rustyorange-500: var(--r-dark-orange-500); /** Deprecated: will be removed in @riverty/design-tokens@3 */
  --r-background-brand-vanguard: var(--r-background-brand); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-brand-vanguard-softest: var(--r-background-brand-softest); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-activated: var(--r-background-state-selected); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-hovered: var(--r-background-state-hovered); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-hovered-inverse: var(--r-background-state-hovered-inverse); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-pressed: var(--r-background-state-activated); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-pressed-inverse: var(--r-background-state-activated-inverse); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-regular: var(--r-background-regular); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-softer: var(--r-background-soft); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-softest: var(--r-background-softest); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-interactive-strong: var(--r-background-regular); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-background-modal: var(--r-background-softest); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-border-brand-vanguard: var(--r-border-brand); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-icon-brand-vanguard: var(--r-icon-brand); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-icon-warning: var(--r-icon-strong-static); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-logo-brand-vanguard: var(--r-logo-brand); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-text-onbrand: var(--r-text-inverse-static); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-text-softer: var(--r-text-soft); /** Deprecated: will be removed in @riverty/design-tokens@3. */
  --r-text-warning: var(--r-text-strong-static); /** Deprecated: will be removed in @riverty/design-tokens@3. */
}

/**
 * Semantic Color Tokens - Light
 */

:root,
[data-theme="light"] {
  --r-internal-theme-state: light;
  --r-background-brand: var(--r-vanguard-400); /** Used in regular decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-brand-softest: var(--r-vanguard-100); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-inverse: var(--r-charcoal-400); /** Used for specific sections that require attention */
  --r-background-overlay: var(--r-charcoal-600-alpha-48); /** Used as an overlay background for components that behave modal */
  --r-background-regular: var(--r-charcoal-400); /** Used for regular backgrounds in components Examples: Primary button */
  --r-background-soft: var(--r-haze-400); /** Used as static backgrounds in our components Examples: dialog, bottom sheet */
  --r-background-softer: var(--r-haze-200); /** Used as the main background color of our mobile interfaces */
  --r-background-softest: var(--r-neutral-white); /** Used as the main background color of our desktop interfaces, as well as small components Examples: input field, select */
  --r-background-softest-static: var(--r-neutral-white); /** Used as a soft background independent of mode */
  --r-background-state-activated: var(--r-charcoal-400-alpha-12); /** Used for activated state in all interactive components */
  --r-background-state-hovered: var(--r-charcoal-400-alpha-04); /** Used for hovered state in all interactive components */
  --r-background-state-selected: var(--r-charcoal-400-alpha-08); /** Used for selected state in all interactive components */
  --r-border-brand: var(--r-vanguard-400); /** Used for borders that serve decoration and function, adding color */
  --r-border-focused: var(--r-focused-400); /** Used for creating focus states of interactive components */
  --r-border-focused-outlined: var(--r-neutral-white); /** Used for highlighting the focus states of interactive components */
  --r-border-inverse: var(--r-neutral-white); /** Used for borders that are on strong backgrounds in light mode and soft backgrounds in darkmode */
  --r-border-regular: var(--r-charcoal-400); /** Used for borders balanced with regular texts and icons */
  --r-border-soft: var(--r-charcoal-300); /** Used for smoother borders but still clearly visible */
  --r-border-softer: var(--r-charcoal-200); /** Used for making distinctions between sections */
  --r-border-softest: var(--r-haze-400); /** Used for borders that serve as decoration rather than function */
  --r-border-strong: var(--r-charcoal-600); /** Used for clear, distinct borders */
  --r-icon-brand: var(--r-vanguard-400); /** Used to add emphasis on one single icon */
  --r-icon-inverse: var(--r-neutral-white); /** Used for icons that are used on inverse backgrounds */
  --r-icon-regular: var(--r-charcoal-400); /** Used for icons that are interactive */
  --r-icon-regular-static: var(--r-charcoal-400); /** Used for icons that are interactive but should keep static in darkmode */
  --r-icon-soft: var(--r-charcoal-300); /** Used for icons that are supporting labels (not interactive) */
  --r-icon-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-icon-regular, static in darkmode */
  --r-link-emphasis: var(--r-azure-500); /** Used to indicate to users the interactivity of a link, used for hover and activated states */
  --r-link-enabled: var(--r-azure-400); /** Used to indicate to users that a link is enabled */
  --r-link-visited-emphasis: var(--r-amethyst-500); /** Used to indicate to users the interactivity of a visited link, used for hover and activated states */
  --r-link-visited-enabled: var(--r-amethyst-400); /** Used to indicate to users that a link has been visited before */
  --r-logo-brand: var(--r-vanguard-400); /** Used when logo requires attention */
  --r-logo-brand-ember: var(--r-ember-400); /** Not used, will be removed in future */
  --r-logo-brand-inverse: var(--r-haze-400); /** Used on dark backgrounds, when logo doesn’t require much attention */
  --r-logo-brand-regular: var(--r-charcoal-400); /** Used when logo doesn’t require much attention */
  --r-status-error-regular: var(--r-red-400); /** Used for indicating strong error  Examples: Error border for badge, error border for toast, error text */
  --r-status-error-regular-static: var(--r-red-400); /** Used for indicating strong error, static in both light and darkmode Examples: error background for primary button */
  --r-status-error-soft: var(--r-red-100); /** Used for indicating soft error, often combined with regular error color Examples: error background for badge, error background for toast */
  --r-status-info-regular: var(--r-blue-400); /** Used for indicating strong info  Examples: info border for badge, info border for toast */
  --r-status-info-soft: var(--r-blue-100); /** Used for indicating soft info, often combined with regular info color Examples: info background for badge, info background for toast */
  --r-status-success-regular: var(--r-green-400); /** Used for indicating strong success  Examples: success border for badge, success border for toast */
  --r-status-success-soft: var(--r-green-100); /** Used for indicating soft success, often combined with regular success color Examples: success background for badge, success background for toast */
  --r-status-warning-regular: var(--r-orange-400); /** Used for indicating strong warning  Examples: warning border for badge, warning border for toast */
  --r-status-warning-soft: var(--r-orange-100); /** Used for indicating soft warning, often combined with regular warning color Examples: warning background for badge, warning background for toast */
  --r-text-brand: var(--r-vanguard-400); /** Used for decorative, large texts only (from font size 24), to emphasize brand Examples: Marketing email headers */
  --r-text-inverse: var(--r-neutral-white); /** Used for regular texts but then on strong backgrounds Examples: Text in Primary button */
  --r-text-inverse-static: var(--r-neutral-white); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
  --r-text-regular: var(--r-charcoal-400); /** Used for all texts that aren’t in need of exceptions  Examples: Headlines, body texts, labels */
  --r-text-soft: var(--r-charcoal-300); /** Used for texts that are additional, not crucial Examples: Hint texts, placeholder texts */
  --r-text-strong: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-text-regular Example: Text in Toast with warning status */
  --r-text-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds that don’t change from light to dark mode, compared to r-text-strong Examples: Text in Primary button */
  --r-background-state-hovered-inverse: var(--r-haze-200-alpha-04); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  --r-background-state-activated-inverse: var(--r-haze-200-alpha-12); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
}

/**
 * Semantic Color Tokens - Dark
 */

[data-theme="dark"] {
  --r-internal-theme-state: dark;
  --r-background-brand: var(--r-dark-vanguard-100); /** Used in regular decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-brand-softest: var(--r-dark-vanguard-400); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
  --r-background-inverse: var(--r-haze-200); /** Used for specific sections that require attention */
  --r-background-overlay: var(--r-charcoal-600-alpha-80); /** Used as an overlay background for components that behave modal */
  --r-background-regular: var(--r-haze-200); /** Used for regular backgrounds in components Examples: Primary button */
  --r-background-soft: var(--r-charcoal-600); /** Used as static backgrounds in our components Examples: dialog, bottom sheet */
  --r-background-softer: var(--r-charcoal-500); /** Used as the main background color of our mobile interfaces */
  --r-background-softest: var(--r-charcoal-400); /** Used as the main background color of our desktop interfaces, as well as small components Examples: input field, select */
  --r-background-softest-static: var(--r-neutral-white); /** Used as a soft background independent of mode */
  --r-background-state-activated: var(--r-haze-200-alpha-12); /** Used for activated state in all interactive components */
  --r-background-state-hovered: var(--r-haze-200-alpha-04); /** Used for hovered state in all interactive components */
  --r-background-state-selected: var(--r-haze-200-alpha-08); /** Used for selected state in all interactive components */
  --r-border-brand: var(--r-dark-vanguard-100); /** Used for borders that serve decoration and function, adding color */
  --r-border-focused: var(--r-focused-400); /** Used for creating focus states of interactive components */
  --r-border-focused-outlined: var(--r-neutral-white); /** Used for highlighting the focus states of interactive components */
  --r-border-inverse: var(--r-charcoal-400); /** Used for borders that are on strong backgrounds in light mode and soft backgrounds in darkmode */
  --r-border-regular: var(--r-haze-200); /** Used for borders balanced with regular texts and icons */
  --r-border-soft: var(--r-charcoal-300); /** Used for smoother borders but still clearly visible */
  --r-border-softer: var(--r-charcoal-300); /** Used for making distinctions between sections */
  --r-border-softest: var(--r-charcoal-200); /** Used for borders that serve as decoration rather than function */
  --r-border-strong: var(--r-neutral-white); /** Used for clear, distinct borders */
  --r-icon-brand: var(--r-dark-vanguard-100); /** Used to add emphasis on one single icon */
  --r-icon-inverse: var(--r-charcoal-400); /** Used for icons that are used on inverse backgrounds */
  --r-icon-regular: var(--r-haze-200); /** Used for icons that are interactive */
  --r-icon-regular-static: var(--r-charcoal-400); /** Used for icons that are interactive but should keep static in darkmode */
  --r-icon-soft: var(--r-charcoal-200); /** Used for icons that are supporting labels (not interactive) */
  --r-icon-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-icon-regular, static in darkmode */
  --r-link-emphasis: var(--r-dark-azure-100); /** Used to indicate to users the interactivity of a link, used for hover and activated states */
  --r-link-enabled: var(--r-dark-azure-200); /** Used to indicate to users that a link is enabled */
  --r-link-visited-emphasis: var(--r-dark-amethyst-100); /** Used to indicate to users the interactivity of a visited link, used for hover and activated states */
  --r-link-visited-enabled: var(--r-dark-amethyst-200); /** Used to indicate to users that a link has been visited before */
  --r-logo-brand: var(--r-vanguard-400); /** Used when logo requires attention */
  --r-logo-brand-ember: var(--r-ember-400); /** Not used, will be removed in future */
  --r-logo-brand-inverse: var(--r-charcoal-400); /** Used on dark backgrounds, when logo doesn’t require much attention */
  --r-logo-brand-regular: var(--r-haze-400); /** Used when logo doesn’t require much attention */
  --r-status-error-regular: var(--r-dark-red-100); /** Used for indicating strong error  Examples: Error border for badge, error border for toast, error text */
  --r-status-error-regular-static: var(--r-red-400); /** Used for indicating strong error, static in both light and darkmode Examples: error background for primary button */
  --r-status-error-soft: var(--r-dark-red-500); /** Used for indicating soft error, often combined with regular error color Examples: error background for badge, error background for toast */
  --r-status-info-regular: var(--r-dark-blue-100); /** Used for indicating strong info  Examples: info border for badge, info border for toast */
  --r-status-info-soft: var(--r-dark-blue-500); /** Used for indicating soft info, often combined with regular info color Examples: info background for badge, info background for toast */
  --r-status-success-regular: var(--r-dark-green-100); /** Used for indicating strong success  Examples: success border for badge, success border for toast */
  --r-status-success-soft: var(--r-dark-green-500); /** Used for indicating soft success, often combined with regular success color Examples: success background for badge, success background for toast */
  --r-status-warning-regular: var(--r-dark-orange-100); /** Used for indicating strong warning  Examples: warning border for badge, warning border for toast */
  --r-status-warning-soft: var(--r-dark-orange-500); /** Used for indicating soft warning, often combined with regular warning color Examples: warning background for badge, warning background for toast */
  --r-text-brand: var(--r-dark-vanguard-100); /** Used for decorative, large texts only (from font size 24), to emphasize brand Examples: Marketing email headers */
  --r-text-inverse: var(--r-charcoal-400); /** Used for regular texts but then on strong backgrounds Examples: Text in Primary button */
  --r-text-inverse-static: var(--r-neutral-white); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
  --r-text-regular: var(--r-haze-200); /** Used for all texts that aren’t in need of exceptions  Examples: Headlines, body texts, labels */
  --r-text-soft: var(--r-charcoal-200); /** Used for texts that are additional, not crucial Examples: Hint texts, placeholder texts */
  --r-text-strong: var(--r-neutral-white); /** Used on coloured backgrounds to ensure better contrast compared to r-text-regular Example: Text in Toast with warning status */
  --r-text-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds that don’t change from light to dark mode, compared to r-text-strong Examples: Text in Primary button */
  --r-background-state-hovered-inverse: var(--r-charcoal-400-alpha-04); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  --r-background-state-activated-inverse: var(--r-charcoal-400-alpha-12); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
}

/**
 * Semantic Color Tokens - Dark
 */

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --r-internal-theme-state: dark;
    --r-background-brand: var(--r-dark-vanguard-100); /** Used in regular decorative screens, containers or sections Examples: Onboarding screens, Login screens */
    --r-background-brand-softest: var(--r-dark-vanguard-400); /** Used in soft decorative screens, containers or sections Examples: Onboarding screens, Login screens */
    --r-background-inverse: var(--r-haze-200); /** Used for specific sections that require attention */
    --r-background-overlay: var(--r-charcoal-600-alpha-80); /** Used as an overlay background for components that behave modal */
    --r-background-regular: var(--r-haze-200); /** Used for regular backgrounds in components Examples: Primary button */
    --r-background-soft: var(--r-charcoal-600); /** Used as static backgrounds in our components Examples: dialog, bottom sheet */
    --r-background-softer: var(--r-charcoal-500); /** Used as the main background color of our mobile interfaces */
    --r-background-softest: var(--r-charcoal-400); /** Used as the main background color of our desktop interfaces, as well as small components Examples: input field, select */
    --r-background-softest-static: var(--r-neutral-white); /** Used as a soft background independent of mode */
    --r-background-state-activated: var(--r-haze-200-alpha-12); /** Used for activated state in all interactive components */
    --r-background-state-hovered: var(--r-haze-200-alpha-04); /** Used for hovered state in all interactive components */
    --r-background-state-selected: var(--r-haze-200-alpha-08); /** Used for selected state in all interactive components */
    --r-border-brand: var(--r-dark-vanguard-100); /** Used for borders that serve decoration and function, adding color */
    --r-border-focused: var(--r-focused-400); /** Used for creating focus states of interactive components */
    --r-border-focused-outlined: var(--r-neutral-white); /** Used for highlighting the focus states of interactive components */
    --r-border-inverse: var(--r-charcoal-400); /** Used for borders that are on strong backgrounds in light mode and soft backgrounds in darkmode */
    --r-border-regular: var(--r-haze-200); /** Used for borders balanced with regular texts and icons */
    --r-border-soft: var(--r-charcoal-300); /** Used for smoother borders but still clearly visible */
    --r-border-softer: var(--r-charcoal-300); /** Used for making distinctions between sections */
    --r-border-softest: var(--r-charcoal-200); /** Used for borders that serve as decoration rather than function */
    --r-border-strong: var(--r-neutral-white); /** Used for clear, distinct borders */
    --r-icon-brand: var(--r-dark-vanguard-100); /** Used to add emphasis on one single icon */
    --r-icon-inverse: var(--r-charcoal-400); /** Used for icons that are used on inverse backgrounds */
    --r-icon-regular: var(--r-haze-200); /** Used for icons that are interactive */
    --r-icon-regular-static: var(--r-charcoal-400); /** Used for icons that are interactive but should keep static in darkmode */
    --r-icon-soft: var(--r-charcoal-200); /** Used for icons that are supporting labels (not interactive) */
    --r-icon-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds to ensure better contrast compared to r-icon-regular, static in darkmode */
    --r-link-emphasis: var(--r-dark-azure-100); /** Used to indicate to users the interactivity of a link, used for hover and activated states */
    --r-link-enabled: var(--r-dark-azure-200); /** Used to indicate to users that a link is enabled */
    --r-link-visited-emphasis: var(--r-dark-amethyst-100); /** Used to indicate to users the interactivity of a visited link, used for hover and activated states */
    --r-link-visited-enabled: var(--r-dark-amethyst-200); /** Used to indicate to users that a link has been visited before */
    --r-logo-brand: var(--r-vanguard-400); /** Used when logo requires attention */
    --r-logo-brand-ember: var(--r-ember-400); /** Not used, will be removed in future */
    --r-logo-brand-inverse: var(--r-charcoal-400); /** Used on dark backgrounds, when logo doesn’t require much attention */
    --r-logo-brand-regular: var(--r-haze-400); /** Used when logo doesn’t require much attention */
    --r-status-error-regular: var(--r-dark-red-100); /** Used for indicating strong error  Examples: Error border for badge, error border for toast, error text */
    --r-status-error-regular-static: var(--r-red-400); /** Used for indicating strong error, static in both light and darkmode Examples: error background for primary button */
    --r-status-error-soft: var(--r-dark-red-500); /** Used for indicating soft error, often combined with regular error color Examples: error background for badge, error background for toast */
    --r-status-info-regular: var(--r-dark-blue-100); /** Used for indicating strong info  Examples: info border for badge, info border for toast */
    --r-status-info-soft: var(--r-dark-blue-500); /** Used for indicating soft info, often combined with regular info color Examples: info background for badge, info background for toast */
    --r-status-success-regular: var(--r-dark-green-100); /** Used for indicating strong success  Examples: success border for badge, success border for toast */
    --r-status-success-soft: var(--r-dark-green-500); /** Used for indicating soft success, often combined with regular success color Examples: success background for badge, success background for toast */
    --r-status-warning-regular: var(--r-dark-orange-100); /** Used for indicating strong warning  Examples: warning border for badge, warning border for toast */
    --r-status-warning-soft: var(--r-dark-orange-500); /** Used for indicating soft warning, often combined with regular warning color Examples: warning background for badge, warning background for toast */
    --r-text-brand: var(--r-dark-vanguard-100); /** Used for decorative, large texts only (from font size 24), to emphasize brand Examples: Marketing email headers */
    --r-text-inverse: var(--r-charcoal-400); /** Used for regular texts but then on strong backgrounds Examples: Text in Primary button */
    --r-text-inverse-static: var(--r-neutral-white); /** Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Examples: Onboarding screen Riverty App */
    --r-text-regular: var(--r-haze-200); /** Used for all texts that aren’t in need of exceptions  Examples: Headlines, body texts, labels */
    --r-text-soft: var(--r-charcoal-200); /** Used for texts that are additional, not crucial Examples: Hint texts, placeholder texts */
    --r-text-strong: var(--r-neutral-white); /** Used on coloured backgrounds to ensure better contrast compared to r-text-regular Example: Text in Toast with warning status */
    --r-text-strong-static: var(--r-charcoal-600); /** Used on coloured backgrounds that don’t change from light to dark mode, compared to r-text-strong Examples: Text in Primary button */
    --r-background-state-hovered-inverse: var(--r-charcoal-400-alpha-04); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
    --r-background-state-activated-inverse: var(--r-charcoal-400-alpha-12); /** Internal Design System token to enable 'inverse'-appearing components such as alert and popover. */
  }
}
/**
 * Specify supported color scheme aligned to theming behaivor
 */
[data-theme="auto"] {
  color-scheme: light dark;
}
[data-theme="light"] {
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
  }
}